CORS 多个标头

Posted

技术标签:

【中文标题】CORS 多个标头【英文标题】:CORS multiple headers 【发布时间】: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: "*")]

【问题讨论】:

【参考方案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 中删除这一行来解决它:&lt;add name="Access-Control-Allow-Origin" value="*" /&gt;【参考方案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 中删除这一行来解决它:&lt;add name="Access-Control-Allow-Origin" value="*" /&gt;【参考方案3】:

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

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

【讨论】:

以上是关于CORS 多个标头的主要内容,如果未能解决你的问题,请参考以下文章

Angular4 CORS 标头包含多个值

CORS问题:标头包含多个值,但只允许一个

CORS 政策问题刚刚开始,没有代码更改 - “CORS 政策:'Access-Control-Allow-Origin' 标头包含多个值”

被 CORS 策略阻止:“Access-Control-Allow-Origin”标头包含多个值“*、*”,但只允许一个

为 Web API 启用多个 CORS

是否可以手动预检多个 CORS 资源?