Блог

У нас есть существующее веб-приложение .Net Core 5, в которое мы добавили приложение reactjs, чтобы начать перенос частей сайта для реагирования. Он отлично работает, когда оба раздела сайта разделены и работают в гармонии, ЗА ИСКЛЮЧЕНИЕМ….

Когда мы загружаем обычную страницу .cshtml, файлы JavaScript для веб-страниц .Net Core (.cshtml) перенаправляются в приложение react вместо загрузки файла на страницу. Пример: Домашняя страница является https://mydomain-dot-com/ и это страница .Net Core .cshtml. Эти файлы js находятся в тегах сценариев на странице .cshtml.

 lt;script src="~/js/what-input.js"gt;lt;/scriptgt; lt;script src="~/js/foundation.js"gt;lt;/scriptgt; lt;script src="~/js/web-app.js"gt;lt;/scriptgt;  

Каждый из этих сценариев выдает страшную неожиданную ошибку токена, которая обычно возникает, когда файл js не может быть найден.

 Uncaught SyntaxError: Unexpected token 'lt;'  

При дальнейшем исследовании мы обнаружили, что ~/js/what-input.js(и т.д.) на самом деле вызывает загрузку приложения reactjs.

URL — адрес приложения reactjs выглядит следующим образом https://mydomain-dot-com/clientapp и должен загружаться только тогда, когда мы переходим по этому URL-адресу, и когда мы это делаем, он работает нормально.

Похоже, что приложение reactjs обрабатывает ВСЕ файлы js как файлы react и загружает приложение react.

Вот файл 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 =gt;  {  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 =gt;  {  options.LoginPath = new PathString("/Account/Logon");    });     services.AddRazorPages().AddRazorRuntimeCompilation();  services.AddControllersWithViews().AddRazorRuntimeCompilation();   services.AddMemoryCache();  services.AddAuthorization();  services.AddControllers();    services.Configurelt;AppSettingsgt;(Configuration.GetSection(AppSettings.SectionName));  services.AddOptions();    services.AddSpaStaticFiles(configuration =gt; {  configuration.RootPath = "ClientApp/build";  });   services.AddCors(c =gt;  {  c.AddPolicy("AllowOrigin", options =gt; 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 =gt; options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());   app.UseEndpoints(endpoints =gt;  {  endpoints.MapControllerRoute(  name: "default",  pattern: "{controller=Home}/{action=Index}/{id?}");   });    app.UseSpa(spa =gt; {  spa.Options.SourcePath = "ClientApp";  if (env.IsEnvironment("LocalDevelopment"))  {  spa.UseReactDevelopmentServer(npmScript: "start");  }   });    AppDomain.CurrentDomain.SetData("ContentRootPath", env.ContentRootPath);  AppDomain.CurrentDomain.SetData("WebRootPath", env.WebRootPath);    } }  

Вопрос в том, как мы предотвращаем перенаправление файлов javascript, не относящихся к reactjs, в приложение, чтобы они вели себя так, как должны вести себя на странице .cshtml? Есть ли способ четко разделить эти проблемы, чтобы они действовали независимо?

Я предполагаю, что вам потребуется другое промежуточное программное обеспечение для обслуживания контента из 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();