The Access-Control-Allow-Origin header contains several values.

Question

I am using AngularJS $ http on the client side to access the endpoint of the ASP.NET Web API application on the server side. Since the client is hosted on a different domain as a server, I need CORS. It works for $ http.post (url, data). But as soon as I authenticate the user and make a request through $ http.get (url), I get a message

 The 'Access-Control-Allow-Origin' header contains multiple values ​​'http://127.0.0.1:9000, http://127.0.0.1:9000', but only one is allowed.  Origin 'http://127.0.0.1:9000' is therefore not allowed access.

Fiddler shows me that there are two header entries in the request request after a successful request for options. What and where am I doing something wrong?

Update

When I use jQuery $ .get instead of $ http.get, the same error message appears. So this is not a problem with AngularJS. But where is it wrong?

Answer 1

I added

config.EnableCors(new EnableCorsAttribute(Properties.Settings.Default.Cors, "", ""))

as well as

app.UseCors(CorsOptions.AllowAll);

on server. This results in two header entries. Just use the latter and it works.

Answer 2

We ran into this problem because we created CORS in accordance with best practice (e.g. http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api ) AND ALSO had a custom header <add name="Access-Control-Allow-Origin" value="*"/> on the network. configurations.

Delete the web.config entry and everything will be fine.

Unlike the @mww answer, we still have EnableCors() in WebApiConfig.cs AND a EnableCorsAttribute on the controller. When we pulled one or the other, we ran into other problems.

Answer 3

I use Cors 5.1.0.0, after a big headache, I found that the problem is duplicated by Access-Control-Allow-Origin and Access-Control-Allow-Header from the server

Removed config.EnableCors() from the WebApiConfig.cs file and just set the [EnableCors("*","*","*")] attribute in the Controller class

Read more about this article .

Answer 4

I also had both OWIN and my WebAPI, which apparently needed CORS, which in turn generated the error 'Access-Control-Allow-Origin' header contains multiple values .

I ended up removing ALL the code that CORS included, and then added the following to the system.webServer node of my Web.Config:

 <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="https://stethio.azurewebsites.net" /> <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS, PUT, DELETE" /> <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Authorization" /> </customHeaders> </httpProtocol> 

Fulfilling these CORS requirements for OWIN (allowing login) and WebAPI (allowing API calls), but created a new problem: during the preview of my API calls, the OPTIONS method could not be found. The fix for this was simple - I just needed to remove the following from handlers node my Web.Config:

 <remove name="OPTIONSVerbHandler" /> 

Hope this helps someone.

Answer 5

In fact, you cannot set multiple Access-Control-Allow-Origin headers (or at least it won’t work in all browsers). Instead, you can conditionally set an environment variable, and then use it in the Header directive:

 SetEnvIf Origin "^(https?://localhost|https://[az]+\.my\.base\.domain)$" ORIGIN_SUB_DOMAIN=$1 Header set Access-Control-Allow-Origin: "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAIN 

So, in this example, the response header will be added only if the Origin request header matches RegExp: ^(https?://localhost|https://[az]+\.my\.base\.domain)$ ( basically it means localhost through HTTP or HTTPS and * .my.base.domain through HTTPS).

Remember to enable the setenvif module.

Docs:

• http://httpd.apache.org/docs/2.2/mod/mod_setenvif.html#setenvif
• http://httpd.apache.org/docs/2.2/mod/mod_headers.html#header

BTW. }e in %{ORIGIN_SUB_DOMAIN}e not a typo. This is how you use the environment variable in the Header directive.

Answer 6

Apache Server:

I spend the same thing, but that was because I did not have any quotation marks (") in my file that provided access to the server, for example '.htaccess.':

 Header add Access-Control-Allow-Origin: * Header add Access-Control-Allow-Origin "*" 

You may also have a .htaccess file in a folder with another .htaccess, for example

 / - .htaccess - public_html / .htaccess (problem here) 

In your case, instead of '*', the asterisk will be the ip server ( http://127.0.0.1:9000 ), for which you give permission to serve data.

ASP.NET:

Make sure your code is missing a duplicate of Access-Control-Allow-Origin.

Developer Tools:

In Chrome, you can check the headers of your requests. Press F12 and go to the "Network" tab, now run the AJAX request and appear in the list, click and enter all the information.

Answer 7

This happens if you have the Cors option configured in several places. In my case, I had this at the controller level, as well as in Startup.Auth.cs / ConfigureAuth.

I understand that if you want the application to be widely distributed, then just configure it in Startup.Auth.cs / ConfigureAuth like this ... You will need a link to Microsoft.Owin.Cors

 public void ConfigureAuth(IAppBuilder app) { app.UseCors(CorsOptions.AllowAll); 

If you prefer to keep it at the controller level, you can simply insert it at the controller level.

 [EnableCors("http://localhost:24589", "*", "*")] public class ProductsController : ApiController { ProductRepository _prodRepo; 

Answer 8

if you are in IIS, you need to activate CORS in web.config, then you do not need to include the registration method in App_Start / WebApiConfig.cs

My solution was commented out the lines here:

 // Enable CORS //EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*"); //config.EnableCors(cors); 

and write in the web.config file:

 <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> </customHeaders> </httpProtocol> 

Answer 9

just had this problem with nodejs server.

this is how i fixed it.
I started my node server through nginx proxy , and I installed nginx and node on both allow cross domain requests , and I didn’t like it, so I deleted it from nginx and left it in node, and everything was fine.

Answer 10

This can also happen, of course, if you really configured the Access-Control-Allow-Origin header to have multiple values. For example, a comma-separated list of values, which is supported by the RFC, but is not actually supported by most major browsers. Please note that the RFC talks about how to allow the use of multiple domains without using the '*'.

For example, you can get this error in Chrome using this header:

Access-Control-Allow-Origin: http://test.mysite.com, http://test2.mysite.com

This was in Chrome Version 64.0.3282.186 (Official Build) (64-bit)

Note that if you are considering this because of the CDN and are using Akamai, you may notice that Akamai will not cache on the server if you use Vary:Origin , as many suggest to solve this problem.

You may have to change the way you create the cache key using the "Change cache id" response behavior. Read more about this issue in this related StackOverflow question

Answer 11

I ran into the same problem, and this is what I did to fix it:

In the WebApi service inside Global.asax, I wrote the following code:

 Sub Application_BeginRequest() Dim currentRequest = HttpContext.Current.Request Dim currentResponse = HttpContext.Current.Response Dim currentOriginValue As String = String.Empty Dim currentHostValue As String = String.Empty Dim currentRequestOrigin = currentRequest.Headers("Origin") Dim currentRequestHost = currentRequest.Headers("Host") Dim currentRequestHeaders = currentRequest.Headers("Access-Control-Request-Headers") Dim currentRequestMethod = currentRequest.Headers("Access-Control-Request-Method") If currentRequestOrigin IsNot Nothing Then currentOriginValue = currentRequestOrigin End If If currentRequest.Path.ToLower().IndexOf("token") > -1 Or Request.HttpMethod = "OPTIONS" Then currentResponse.Headers.Remove("Access-Control-Allow-Origin") currentResponse.AppendHeader("Access-Control-Allow-Origin", "*") End If For Each key In Request.Headers.AllKeys If key = "Origin" AndAlso Request.HttpMethod = "OPTIONS" Then currentResponse.AppendHeader("Access-Control-Allow-Credentials", "true") currentResponse.AppendHeader("Access-Control-Allow-Methods", currentRequestMethod) currentResponse.AppendHeader("Access-Control-Allow-Headers", If(currentRequestHeaders, "GET,POST,PUT,DELETE,OPTIONS")) currentResponse.StatusCode = 200 currentResponse.End() End If Next End Sub 

Here, this code allows only the pre-flight and token request to add "Access-Control-Allow-Origin" to the response, otherwise I will not add it.

Here is my implementation blog: https://ibhowmick.wordpress.com/2018/09/21/cross-domain-token-based-authentication-with-web-api2-and-jquery-angular-5-angular- 6 /

Answer 12

for those using IIS with php, in IIS this is a server-side update. web.config write its root directory (wwwroot) and add this

 <?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <directoryBrowse enabled="true" /> <httpProtocol> <customHeaders> <add name="Control-Allow-Origin" value="*"/> </customHeaders> </httpProtocol> </system.webServer> </configuration> 

after that restart the IIS server, enter IISReset in RUN and enter