Access to xmlhttprequest at from origin has been blocked by cors policy in Angular 6

Question

I'm using Asp.Net Core Boilerplate framework for my server side project. Angular 6 using for the client side project. Server side project working without any errors. (Showing Swagger API - and APIs are also working)

No any compile errors from Angular project. When run the angular project using Google chrome, (http://localhost:4200/) it showing following error message.

Browser console displays this :-

Access to XMLHttpRequest at 'http://server.projectName.lk//AbpUserConfiguration/GetAll' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

When click on the ''http://server.projectName.lk//AbpUserConfiguration/GetAll'' link, it opens in a another tab and showing below error,

Highly appreciate your ideas to solve this..

NOTE : No any previous questions gave me a solution.

This is the debug error log you receive for this issue

> The thread 0x54b0 has exited with code 0 (0x0).
> Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request
> starting HTTP/1.1 OPTIONS
> http://localhost:21021/AbpUserConfiguration/GetAll  0
> Microsoft.AspNetCore.Cors.Infrastructure.CorsService:Information: CORS
> policy execution failed.
> Microsoft.AspNetCore.Cors.Infrastructure.CorsService:Information:
> Request origin http://localhost:4200 does not have permission to
> access the resource.
> Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request
> finished in 311.689ms 204 
> Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker:Information:
> Route matched with {action = "Index", controller = "Home", area = ""}.
> Executing action San.BA.Web.Host.Controllers.HomeController.Index
> (San.BA.Web.Host) The program '[21292] dotnet.exe' has exited with
> code -1 (0xffffffff).

startup.cs File

"http://server.projectName.lk/AbpUserConfiguration/GetAll" ,can you just open new tab and enter this url. — Hameed Syed, Feb 06 '19 at 05:15
What did you changed with default abp project template? Have you published the backend or run from VS? For 404, it seems the request url is wrong, check the method in swagger and share us the how you send request from client. — Edward, Feb 06 '19 at 05:42
api AbpUserConfiguration/GetAll method doesnt exist at your server side. — Hameed Syed, Feb 06 '19 at 05:57
Hi Tao, I added existing project files into the downloaded default Abp project template. And I ran Abp project with VS.. — Mohan Perera, Feb 06 '19 at 06:51
Is there any demo to reproduce your issue? What is your `Startup` and what is the `AbpUserConfiguration`? — Edward, Feb 06 '19 at 11:57
if you get an error for GetAll action. check out the logs on your host — Alper Ebicoglu, Feb 08 '19 at 06:53
@Tao Zhou Added the *startup.cs* file link at the end of the question. There is no any method or file called *AbpUserConfiguration* in the project. But it is mentioned in old logs. — Mohan Perera, Feb 15 '19 at 04:28
Yes @HameedSyed.. api AbpUserConfiguration/GetAll method doesn't exist in my server side. So what can I do for that, to get rid of this error ? — Mohan Perera, Feb 18 '19 at 08:55

score 2 · Answer 1 · answered Feb 07 '19 at 11:20

Cross Origin Resource Sharing (CORS) is a W3C standard that allows a server to relax the same-origin policy. Using CORS, a server can explicitly allow some cross-origin requests while rejecting others. CORS is safer and more flexible than earlier techniques, such as JSONP. This topic shows how to enable CORS in an ASP.NET Core app.

This is happening due to the CORS Policy failed on the server side. As you need to either add the client url in appsettings.json file in host Project.

"App": { ...... "CorsOrigins": "http://localhost:4200" ...... }

For more information you can check the following URL:
https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.2

Really valuable and helpful answer. But **"CorsOrigins"** is already defined in my appsettings.json file as you answered. — Mohan Perera, Feb 08 '19 at 03:39

score 1 · Answer 2 · answered Aug 23 '19 at 11:07

I know it's an old question, but thought this would help anyone who will face this issue. We recently encountered the same error when we moved our ASP.NET WebAPI based application to AWS. It turned out that the load balancer (ALB) had a timeout of one minute, meaning if any API takes more than a minute, ALB was canceling the request and strangely Chrome gives the error related to CORS. In IIS HTTPERR logs, such a request was marked as Request_Cancelled. Since one of our APIs was taking more than a minute, we had to change the timeout configuration in the ALB and things started working smoothly! It's a mystery why Chrome calls it CORS though!

score 0 · Answer 3 · answered Sep 27 '19 at 07:21

Just go in web.config file and paste below code under

system.webServer

<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" />  
    </customHeaders>  
  </httpProtocol>

Access to xmlhttprequest at from origin has been blocked by cors policy in Angular 6

3 Answers3