CODEWITHSUNDEEP
javascriptc#reactjsasp.netcors
Yura Morozov
Yura Morozov

Reputation: 431

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

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(); });}
);

Upvotes: 26

Views: 131779

Answers (8)

Samie Ullah
Samie Ullah

Reputation: 23

In ASP.NET Core To Fetch API with Credentials Use:

using System.Text;
using System.Net.Http.Headers;

namespace ExternalAPIModule.Helpers
{
    public class APISecurity       
    {
        public static void InitHeader(HttpClient httpClient)
        {
            string username = "", password = "";
            string authInfo = $"{username}:{password}";
            authInfo = Convert.ToBase64String(Encoding.Default.GetBytes(authInfo));
            httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic",authInfo);
        }
    }
}

And in Controller:

_httpClient.BaseAddress = new Uri("Url of API without Credentials");
APISecurity.InitHeader(_httpClient);    
HttpResponseMessage response = _httpClient.GetAsync("products.json/").Result;
response.EnsureSuccessStatusCode();
var data = response.Content.ReadAsStringAsync().Result;

Upvotes: 0

bzmind
bzmind

Reputation: 438

In my case, I was trying to make a blob from an image stored on the API (the server) so the URL was pointing to that resource, in that API's program.cs class, I already had a CORS policy, but I'd get the exact error as you said. After I read the Microsoft docs (read the first paragraph that you see) about this issue, it is said that if you want to access a resource on the server, by using JavaScript (which is what I was trying to do), then you must call the app.UseCors(); BEFORE the app.UseStaticFiles(); which is typically the opposite.

My program.cs:

const string corsPolicyName = "ApiCORS";

builder.Services.AddCors(options =>
{
    options.AddPolicy(corsPolicyName, policy =>
    {
        policy.WithOrigins("https://localhost:7212");
    });
});

...

var app = builder.Build();

app.UseSwagger();

app.UseSwaggerUI(settings =>
{
    settings.DisplayRequestDuration();
    settings.EnableTryItOutByDefault();
});

app.UseHttpsRedirection();

app.UseCors(corsPolicyName); // 👈 This should be above the UseStaticFiles();

app.UseStaticFiles(); // 👈 Below the UseCors();

app.UseAuthentication();

app.UseAuthorization();

app.UseApiCustomExceptionHandler();

app.MapControllers();

app.Run();

Upvotes: 0

Smit Gajera
Smit Gajera

Reputation: 1039

FOR NODE EXPRESS GRAPHQL RESTAPI Add this header middleware to avoid CORS and any POST or OPTIONS error

app.use((req, res, next) => {
      res.setHeader("Access-Control-Allow-Origin", "*");
      res.setHeader(
        "Access-Control-Allow-Methods",
        "OPTIONS, GET, POST, PUT, PATCH, DELETE"
      );
      res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
      if (req.method === "OPTIONS") {
        return res.sendStatus(200);
      }
      next();
    });

Upvotes: 3

Bad Memory
Bad Memory

Reputation: 91

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.

Upvotes: 9

Matan Livne
Matan Livne

Reputation: 173

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();
})

Upvotes: 0

mahdi
mahdi

Reputation: 41

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

Upvotes: 4

anerco
anerco

Reputation: 107

Try this: 

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

Upvotes: 0

Jose Bibiloni
Jose Bibiloni

Reputation: 41

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.

Upvotes: -8

Related Questions