12

Access to XMLHttpRequest at 'API_URL' from origin 'http://localhost:8080' 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 I was run my localhost system to access server API. It will generate token instead of I am getting the error like above error. please help me.

gehbiszumeis
  • 3,525
  • 4
  • 24
  • 41
selva kumar
  • 147
  • 1
  • 1
  • 8

3 Answers3

2

Best option: CORS header (requires server changes) CORS (Cross-Origin Resource Sharing) is a way for the server to say “I will accept your request, even though you came from a different origin.” This requires cooperation from the server – so if you can’t modify the server (e.g. if you’re using an external API), this approach won’t work.

Modify the server to add the header Access-Control-Allow-Origin: * to enable cross-origin requests from anywhere (or specify a domain instead of *). This should solve your problem.

2nd choice: Proxy Server If you can’t modify the server, you can run your own proxy. And this proxy can return the Access-Control-Allow-Origin header if it’s not at the Same Origin as your page.

Instead of sending API requests to some remote server, you’ll make requests to your proxy, which will forward them to the remote server.

For first option, If using .Net Core: 

       services.AddCors(options =>
        {
            options.AddPolicy("CorsPolicy",
                builder => builder.AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowCredentials());
        });

and

app.UseCors("CorsPolicy");

José Matos
  • 569
  • 4
  • 13
  • I am using Angular 5 with ionic 3. It is possible to add in angular. I am having only for API url. not having access to server asp.net. anything is possible to client side like angular. – selva kumar Jul 01 '19 at 08:07
  • Hi, Jose Matos, After adding proxy.config.json file. when I was access from localhost to server API. I am getting same error. Please give me solution – selva kumar Jul 03 '19 at 07:45
  • After implementing the above, I still get the same error. – w0ns88 Oct 03 '19 at 11:37
0

you need to enable cross-origin resource in your API, so that it can be accessed from localhost as caller.

More info here https://enable-cors.org/server.html and here https://www.html5rocks.com/en/tutorials/cors/

Pier Daniele Cretara
  • 36
  • 1
  • 3
  • HTTP/1.1 200 OK Allow: GET, HEAD, POST, TRACE, OPTIONS Content-Length: 0 Content-Language: en-US Server: X-Powered-By: X-Frame-Options: Allow-From http://API-URL X-ASPNET-VERSION: Date: Mon, 01 Jul 2019 07:58:41 GMT – selva kumar Jul 01 '19 at 08:00
  • My header response like that above one. – selva kumar Jul 01 '19 at 08:00
  • The most important thing is the referer (http://localhost) that your API hasnt in "white list": you can add this by instructions like ((HttpServletResponse) servletResponse).addHeader("Access-Control-Allow-Origin", "*"); ((HttpServletResponse) servletResponse).addHeader("Access-Control-Allow-Methods","GET, OPTIONS, HEAD, PUT, POST"); (Java example) – Pier Daniele Cretara Jul 02 '19 at 08:54
  • var headers = { 'Access-Control-Allow-Origin' : '*', 'Access-Control-Allow-Methods' : 'POST, GET, OPTIONS, PUT', 'Content-Type': 'application/json; charset=UTF-8', 'Accept': 'application/json' };(this is my header, I am getting same error) – selva kumar Jul 03 '19 at 07:48
  • What is the complete configuration of your REST call? Are you sure u are using "application/json"? – Pier Daniele Cretara Jul 03 '19 at 15:19
0

Cors Issue Solved Based on Lot of research. I got one solution. I have refer the document like ionic cordova plugin installed in my App. fixing the Cors issue. Below given the document URL : https://ionicframework.com/docs/native/http

Go through Implement On it.

I got Server API response below like this. please help me.

data: "{"statusCode":"1004","message":"Authorization failed"}"

selva kumar
  • 147
  • 1
  • 1
  • 8