Angular & Web API: 'Access-Control-Allow-Origin’ header contain multiple values.(blocked by CORS policy).

Aman Sharma
0
Error:
Access to XMLHttpRequest at 'http://core/api/test/filter?id=0' from origin
'http://test.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values 'http://testcom, ,', but only one is allowed.

Solutions:
1.       Temporary solution for testing or development purpose: Disable web security by following command.


Open Run  --> Type Following Command

  ‘chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security’

New chrome will open, run your website or application in this browser. It will work fine. Browser will look like this:


2.       When Issue occurred on Server: Add custom header & following settings in web config file in   <system.webServer> section:


<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="," />
        <add name="Access-Control-Allow-Headers" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET, HEAD, POST, PUT, DELETE, OPTIONS" />
    </customHeaders>
 </httpProtocol>


3.       In Startup.cs: add following settings in




// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
     
  public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            using (var serviceScope = app.ApplicationServices.CreateScope())
            {
                var context = serviceScope.ServiceProvider.GetRequiredService<DBContext>();
                context.Database.Migrate();
            }
            app.UseCors(options => options.WithOrigins("http://test.com").AllowAnyMethod().AllowAnyHeader().AllowCredentials().AllowAnyOrigin());
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            app.UseMvc();
        }


Add url, where you are consuming these webApi. So it will allow CORS.

       
       Dont use solution 2 & 3 together, in this way settings will be implemented twice & it will give same error.

       Hope this article will help you to sort out this issue. In case of any query or further issue, you can comment
      in comment section below.

Post a Comment

0Comments
Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !