Access to fetch at *** from origin *** has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

8
votes

I have error

Access to fetch at 'http://localhost:5000/admin/authenticate' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

My ApiManager

function login(username, password) {
    const requestOptions = {
        method: 'POST',
        headers: {    
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*' },
        body: JSON.stringify({ username, password })};

    return fetch(`http://localhost:5000/admin/authenticate`, requestOptions)
        .then(handleResponse)
        .then(user => {
            // store user details and jwt token in local storage to keep user logged in between page refreshes
            localStorage.setItem('user', JSON.stringify(user));
            return user;
        }
    );
}

In Backend Asp.Net Core 2.2 (Startup.cs) I write:

services.AddCors(options =>
{
    options.AddPolicy(
        _corsName,
        builder => { builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader().AllowCredentials(); });}
);
5
javascriptc#asp.netreactjsapi
AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader().AllowCredentials() is NOT a valid CORS setup, please take the time to read developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/… – Camilo Terevinto
What is the expected result of setting 'Accept': 'application/json' and 'Access-Control-Allow-Origin': '*' headers at client-side? – guest271314
I believe with your code that you only registered the CORS service, and didn't enable it. I'd refer to the documentation and see where your code specifically differs. – Mark C.

5 Answers

3
votes

i tried anerco's answer but it didn't work for me, i found this article, it has a very similar solution but with .SetIsOriginAllowed(origin => true) added and .AllowAnyOrigin() removed.

So you should add this code to your Configure method in startup class :

app.UseCors(x => x
                    .AllowAnyMethod()
                    .AllowAnyHeader()
                    .SetIsOriginAllowed(origin => true) // allow any origin
                    .AllowCredentials()); // allow credentials

I recommend reading the article to get a better understanding of all of this, it's very short and straight to the point.

1
votes

Try this: 

on Startup.cs => Confirgure add:
     app.UseCors(x => x.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader().AllowCredentials());
1
votes

Hi I'm new on this topic but because I've got this error last week I tried enabling options method and the first part resolved . This error happens due to policy and security issues but now I refer you to get the status code and in my case it was 405 error which means now we have to change our headers in the request to allow all methods and origins (no way ) but it doesn't help me out.

So I figured out that I have enabled cookie encryption and session (wide of the point) in my app for my API therefore I disabled them and cleared browser cookie as well .

So try using these:

  1. Clear your cookies and add Access-Control-Allow-Origin': '*' by Mod Header extension and try again to check the fix . mod header - your header (client)

  2. Try using a middle interface to control your request and guide them into the special rules 

    app.use((req, res, next) => {
      res.header('Access-Control-Allow-Origin', '*');
      next();
    });

According to this site : https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9

0
votes

If your server is express.js based, add these lines to the server:

app.use(function (req, res, next) {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
   next();
})
-9
votes

There is a bug in Chrome that has affected users for years now, it can be found here.

You can use the Chrome extension Allow-Control-Allow-Origin: * found here: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

Alternatively you can use http://lacolhost.com/ which points to 127.0.0.1 like localhost.