ASPNET 核心。角。静态页面和html5模式答案

【问题标题】：Aspnet Core. Angular. Static page and html5 modeASPNET 核心。角。静态页面和html5模式
【发布时间】：2016-08-22 20:06:16
【问题描述】：

我正在使用 Aspnet Core rc1 构建 AngularJs 和 WebApi 应用程序。我在返回静态 index.html 文件时遇到问题。我尝试了几种方法。第一种方法是在Startup.cs中使用这样的代码

app.UseFileServer();
app.UseMvc();

如果我调用http://localhost:29838（root url），它会以这种方式工作。但是如果我继续http://localhost:29838/books（/books root 是我使用 ng-route 定义的角度根，并且我使用的是 html5 模式）并更新页面，服务器当然会返回 404 错误。

然后，我阅读了这篇文章https://dzone.com/articles/fixing-html5mode-and-angular。我尝试在web.config/ 中使用重写模块方法，一切正常。但我不喜欢这种方法。据我了解，它仅适用于 IIS。

最后，我尝试使用第一种方式，在文章中描述（当Home/Index返回html文件时）。控制器代码为：

public ActionResult Index()
{
    return File("~/index.html", "text/html");
}

而Startup.cs 是：

routes.MapRoute(
  name: "Default",
  url: "{*.}",
  defaults: new
  {
    controller = "Home",
    action = "Index",
  }
);

使用这种方法我有这样的错误：Refused to load the script 'http://localhost:29838/libs/jquery/dist/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'unsafe-inline'". 我无法克服这一点。我做错了什么？

【问题讨论】：

你试过用app.UseStaticFiles();/和app.UseDefaultFiles();
是的。我努力了。事实上，当我从控制器返回 html 时，我无法理解脚本起源问题。我看过很多关于这个的教程
凹凸。我不知道...我将 angular2 与 VS2015 和 MVC5 一起使用，有很多问题，但没有像您这样的问题...而且我认为您不应该使用 JQuery，因为 Angular 中已经有 JQLite。

标签： angularjs html asp.net-web-api asp.net-core

【解决方案1】：

如果您使用具有服务器端渲染或某些服务器逻辑的 MVC 页面，@Andrei 提到的 SpaServices 非常棒。

如果您在服务器端没有任何逻辑，并且您不需要它，您可以执行以下操作：

app.Use(async (context, next) => 
{ 
    await next(); 
    if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value)) 
    { 
        context.Request.Path = "/index.html"; 
        await next(); 
    } 
}) 
.UseDefaultFiles(new DefaultFilesOptions { DefaultFileNames = new List<string> { "index.html" } }) 
.UseStaticFiles()

sn-p 的作用是查找服务器端不存在的页面，并将它们重定向到“/index.html”。如果您有不同的入口点文件，则可以更改 Url。此外，如果请求的文件具有扩展名，则提供它以允许在客户端上呈现 javascript、css、html 等。

你也可以看这里：https://code.msdn.microsoft.com/How-to-fix-the-routing-225ac90f

【讨论】：

【解决方案2】：

尝试使用AspnetCore.SpaServices，它们为您提供合法的 HTML5 spa-fallback。像这样的：

app.UseStaticFiles();
app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");

    routes.MapSpaFallbackRoute(
        name: "spa-fallback",
        defaults: new { controller = "Home", action = "Index" });
});

这个库解决了您与 SPA-fallback 相关的所有问题。

【讨论】：

【解决方案3】：

最后。我找到了解决方案。为了安全起见，我使用OpenIdConnect.Server。在示例项目中，作者使用了NWebsec.Middleware。我刚刚从这个示例项目中复制了 csp 设置

 app.UseCsp(options => options.DefaultSources(configuration => configuration.Self())
                                     .ImageSources(configuration => configuration.Self().CustomSources("data:"))
                                     .ScriptSources(configuration => configuration.UnsafeInline())
                                     .StyleSources(configuration => configuration.Self().UnsafeInline()));

请注意，作者在ScripSources() 之后调用.Self() 方法时拼写错误。而且我没有注意到！小心复制和粘贴

【讨论】：