多个Access-Control-Allow-Origin标头 [英] Multiple Access-Control-Allow-Origin headers
问题描述
作为参考,我正在使用Visual Studio 2017和Windows10。
我有一个Web api和具有用户帐户的相应Web应用程序。当我尝试登录时,遇到一个错误,提示没有Access-Control-Allow-Origin标头。我找到了一个指南,引导我完成了如何设置CORS。这是我使用的指南。
因此 Access-Control-Allow-Origin:*肯定显示了两次,但问题是为什么。我搜索了所有代码,但只声明了一次。如果我删除该行,则会中断登录页面,因此我必须将其保留。
我想我已经知道了。我进入了WebApiConfig文件,将有关CORS的部分更改为:
// var cors = new EnableCorsAttribute( * , *, *);
//config.EnableCors(cors);
config.EnableCors();
然后我从控制器中删除了EnableCors部分,它又开始重新工作。我在GET通话中仍然遇到错误,但是我从两个错误变为一个错误,所以我认为它是进步的。
For reference I'm using Visual Studio 2017 and Windows 10.
I have a web api and corresponding web application with user accounts. When I attempted to login I was met with an error which said No Access-Control-Allow-Origin header is present. I found a guide that walked me through how to setup CORS. This is the guide I used.
In my WebApiConfig file I have this code
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
// Configure Web API to use only bearer token authentication.
config.SuppressDefaultHostAuthentication();
config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);
}
In my AccountController file I added in the EnableCors at the top.
[EnableCors(origins: "*", headers: "*", methods: "*")]
[Authorize]
[RoutePrefix("api/Account")]
Finally, in my Web.config file I added the following:
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
<add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
<add name="Access-Control-Allow-Credentials" value="true" />
</customHeaders>
</httpProtocol>
This fixed my login issue however, none of my GETS are working. Here is an example of a GET function:
jQuery.support.cors = true;
if (window.XMLHttpRequest) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", 'http://localhost:60690/api/ProfilePicture?Username=' + username, false);
xmlhttp.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
xmlhttp.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('accessToken'));
xmlhttp.send();
if (xmlhttp.status == 200) {
returnValue = jQuery.parseJSON(xmlhttp.responseText);
}
}
The GET is throwing an error which says "Multiple Access-Control-Allow-Origin headers are not allowed for CORS response". I don't see where I have multiple Access-Control-Allow-Origin headers anywhere. Where should I be looking?
Update 1
Found something interesting. I used Fiddler to watch everything going on in the background and on the GET function that causes the error I'm seeing this in the headers:
So the "Access-Control-Allow-Origin: *" is definitely showing twice but the question is why. I searched all of my code and I only have that declared once. If I remove that line, it breaks the login page so I have to leave it in.
I think I figured this out. I went into the WebApiConfig file and changed the part about CORS to this:
//var cors = new EnableCorsAttribute("*", "*", "*");
//config.EnableCors(cors);
config.EnableCors();
Then I removed the EnableCors part from my Controller and it sort of started working again. I'm still getting an error on the GET call but I went from two errors to just one so it's progress I guess.
这篇关于多个Access-Control-Allow-Origin标头的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!