#javascript #c# #reactjs #asp.net-mvc #asp.net-core
#язык JavaScript #c# #реагирует на #asp.net-mvc #asp.сетевое ядро
Вопрос:
У нас есть существующее веб-приложение .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? Есть ли способ четко разделить эти проблемы, чтобы они действовали независимо?
Комментарии:
1. Что такое файл/HTML, возвращаемый при доступе «/js/what-input.js»? Я думаю, что может быть несколько
UseDefaultFiles
иUseStaticFiles
иUseSpaStaticFiles
это вызвало проблему.2. @LukeVo Возвращается страница индекса по умолчанию для приложения react
3. Можете ли вы попробовать добавить
app.UseStaticFiles()
(просто используйте настройки по умолчанию) до или послеUseDefaultFiles()
и посмотреть, что произойдет? Также, где вашеwhat-input.js
досье? Это вwwwroot/js
папке? Возможно, будет полезно, если вы дадите нам краткое описание вашей файловой структуры.
Ответ №1:
Я предполагаю, что вам потребуется другое промежуточное программное обеспечение для обслуживания контента из 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();