Access to XMLHttpRequest at 'API_URL' from origin 'http://localhost:8080' has been blocked by CORS policy:

问题

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.

回答1:

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/

回答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");

回答3:

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"}"

来源：https://stackoverflow.com/questions/56831813/access-to-xmlhttprequest-at-api-url-from-origin-http-localhost8080-has-be

标签

angular

typescript

ionic3