CORS 多个标头答案

【问题标题】：CORS multiple headersCORS 多个标头
【发布时间】：2017-09-26 11:13:57
【问题描述】：

在将 Web api 项目部署到本地 IIS 之前，我已经为我的 web api 项目启用了 CORS。但是，当我尝试从 Angular 调用控制器方法时，出现以下错误：

SEC7128：CORS 响应不允许使用多个 Access-Control-Allow-Origin 标头。

为了在我的 web api 上启用 CORS，我在 WebApi.config 中添加了这行代码：

config.EnableCors();

我还在我的控制器类中添加了这个属性：

[EnableCors(origins: "http://localhost:53720", headers: "*", methods: "*")]

【问题讨论】：

标签： angular asp.net-web-api cors

【解决方案1】：

"*" as Access-Control-Allow-Origin 不适用于所有浏览器。为了能够从任何站点调用 Web API，可以将Origin HTTP 请求标头作为一个允许的来源，将其复制到Access-Control-Allow-Origin。这可以通过以下 OWIN 中间件来完成：

class CORSAnyOriginMiddleware : OwinMiddleware
{
    const string OriginHeader = "Origin";
    const string AllowOriginHeader = "Access-Control-Allow-Origin";

    public CORSAnyOriginMiddleware(OwinMiddleware next) : base(next)
    { }

    public override async Task Invoke(IOwinContext context)
    {
        await Next.Invoke(context);

        if (context.Response?.Headers?.ContainsKey(AllowOriginHeader) ?? false &&
            (context.Request?.Headers?.ContainsKey(OriginHeader) ?? false))
            context.Response.Headers[AllowOriginHeader] =
                context.Request.Headers[OriginHeader];
    }
}

使用示例（Startup.Configuration(IAppBuilder appBuilder) 内）：

appBuilder.Use<CORSAnyOriginMiddleware>();

【讨论】：

""*" as Access-Control-Allow-Origin 不适用于所有浏览器"来源？
我设法通过从我的 web.config 中删除这一行来解决它：<add name="Access-Control-Allow-Origin" value="*" />

【解决方案2】：

就像错误说不允许标头一样。要允许该标题，您应该添加标题：

访问控制允许标头

你需要在其中增加价值：

访问控制允许来源

除此之外，您还需要添加要在响应中使用的其他标题名称。

例如如果要使用MyAwesomeHeader 标头：
{"Access-Control-Allow-Headers": "Access-Control-Allow-Origin, MyAwesomeHeader"}

【讨论】：

"Like error says you need to add header" 错误告诉 OP 删除一个 header。
它们是不允许的，因为你不允许它们带有标题：Access-Control-Allow-Headers
我设法通过从我的 web.config 中删除这一行来解决它：<add name="Access-Control-Allow-Origin" value="*" />

【解决方案3】：

我设法通过从我的 web.config 中删除这一行来解决它：

<add name="Access-Control-Allow-Origin" value="*" />

【讨论】：