javascript - 无法使用请求中的自定义 header 跨域加载 Angular 模板

Question

我们有一个客户项目，其中包含 3 个不同的网站，我们希望重复使用尽可能多的代码。我们有一个项目，其中包含大量核心 Angular JavaScript/指令模板等。

我们使用 ASP.NET 4 和 Angular 1.5.5。

我能够使用启用了 CORS 的绝对 URL 从项目 2 渲染出项目 1 中保存的模板。

但是，我们还使用请求拦截器通过请求 header 对应用程序之间的单点登录进行身份验证。这会阻止跨域模板被拉入项目 2，并出现以下错误: XMLHttpRequest cannot load https://localhost:44302/path/to/template.html. Response for preflight has invalid HTTP status code 405 .

如果我删除设置“授权” header 的代码，则模板可以完美地跨域工作。

看起来请求与拦截器的唯一区别是它具有以下 header :

access-control-request-headers:authorization
access-control-request-method:GET


这是否会导致模板无法加载？

Answer 1

通过在 ASP.NET Web 端而不是 Angular 端设置 CORS 解决了这个问题。

我们在 Startup.cs 文件中使用私有(private)方法启用了它。我们有一个名为 Cors.AllowedOrigins 的 Web.config 设置，其中包含一个 ; 分隔的字符串，其中包含我们希望在 CORS 中允许的每个应用程序。

    private void EnableCors(IAppBuilder app)
    {
        var policy = new CorsPolicy
        {
            AllowAnyMethod = true,
            AllowAnyHeader = true
        };

        var origins = ConfigurationManager.AppSettings["Cors.AllowedOrigins"];
        if (origins != null)
        {
            foreach (var origin in origins.Split(';'))
            {
                policy.Origins.Add(origin);
            }
        }
        else
        {
            policy.AllowAnyOrigin = true;
        }

        var corsOptions = new CorsOptions
        {
            PolicyProvider = new CorsPolicyProvider
            {
                PolicyResolver = context => Task.FromResult(policy)
            }
        };
        app.UseCors(corsOptions);
    }

我们在 Configuration 方法中调用此方法，并传递 IAppBuilder。