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 中删除这一行来解决它:<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="*" />
【讨论】:
以上是关于CORS 多个标头的主要内容,如果未能解决你的问题,请参考以下文章
CORS 政策问题刚刚开始,没有代码更改 - “CORS 政策:'Access-Control-Allow-Origin' 标头包含多个值”
被 CORS 策略阻止:“Access-Control-Allow-Origin”标头包含多个值“*、*”,但只允许一个