我們有一個現有的 .Net Core 5 Web 應用程式，我們向其中添加了一個 reactjs 應用程式，以便開始遷移站點的部分以進行回應。它在站點的兩個部分分開并和諧運行的情況下運行良好，除了......
當我們加載常規 .cshtml 頁面時，.Net Core 網頁 (.cshtml) 的 JavaScript 檔案會重定向到 React 應用程式，而不是將檔案加載到頁面。示例：主頁是 https://mydomain-dot-com/，它是一個 .Net Core .cshtml 頁面。這些 js 檔案位于 .cshtml 頁面上的腳本標記中。
<script src="~/js/what-input.js"></script>
<script src="~/js/foundation.js"></script>
<script src="~/js/web-app.js"></script>
這些腳本中的每一個都拋出可怕的意外令牌錯誤，通常在找不到 js 檔案時拋出。
Uncaught SyntaxError: Unexpected token '<'
經過進一步探索，我們發現 ~/js/what-input.js(etc.) 實際上導致 reactjs 應用程式加載。
reactjs 應用程式的 url 是 https://mydomain-dot-com/clientapp 并且應該只在我們導航到該 url 時加載并且當我們這樣做時它作業正常。
似乎 reactjs 應用程式將所有 js 檔案視為反應檔案并加載反應應用程式。
這是startup.cs檔案和配置，因此您可以看到 SPA 是如何實作的。
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
public void ConfigureServices(IServiceCollection services)
{
services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
.AddCookie(CookieAuthenticationDefaults.AuthenticationScheme,
options =>
{
options.LoginPath = new PathString("/account/logon");
options.AccessDeniedPath = new PathString("/account/denied");
options.LogoutPath = new PathString("/");
options.Cookie.HttpOnly = true; //added 11/10/2021 for reactjs app
});
services.ConfigureApplicationCookie(options =>
{
options.LoginPath = new PathString("/Account/Logon");
});
services.AddRazorPages().AddRazorRuntimeCompilation();
services.AddControllersWithViews().AddRazorRuntimeCompilation();
services.AddMemoryCache();
services.AddAuthorization();
services.AddControllers();
services.Configure<AppSettings>(Configuration.GetSection(AppSettings.SectionName));
services.AddOptions();
services.AddSpaStaticFiles(configuration => {
configuration.RootPath = "ClientApp/build";
});
services.AddCors(c =>
{
c.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
});
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsEnvironment("LocalDevelopment"))
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Home/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseDefaultFiles();
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), @".well-known")),
RequestPath = new PathString("/.well-known"),
ServeUnknownFileTypes = true // serve extensionless
});
app.UseSpaStaticFiles();
app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();
app.UseCors(options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
app.UseSpa(spa => {
spa.Options.SourcePath = "ClientApp";
if (env.IsEnvironment("LocalDevelopment"))
{
spa.UseReactDevelopmentServer(npmScript: "start");
}
});
AppDomain.CurrentDomain.SetData("ContentRootPath", env.ContentRootPath);
AppDomain.CurrentDomain.SetData("WebRootPath", env.WebRootPath);
}
}
問題是我們如何防止非 reactjs javascript 檔案重定向到應用程式，以便它們在 .cshtml 頁面上按應有的方式運行？有沒有辦法明確地分離這些關注點，以便它們獨立行動？
uj5u.com熱心網友回復：
我想您需要另一個中間件來提供來自 wwwroot
app.UseStaticFiles();
例子：
app.UseStaticFiles();
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), @".well-known")),
RequestPath = new PathString("/.well-known"),
ServeUnknownFileTypes = true
});
services.AddSpaStaticFiles();
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/377408.html