How to How to fix "No 'Access-Control-Allow-Origin' header is present on the requested resource" in post call in reactJS using Fetch method

Question

Getting below error while i call DotNet core API method from ReactJS post call using Fetch options.

• ReactJS post call only i am getting this error, below way i was tried.

  • Jquery get/post request - working fine
  • Postman get/post request - working fine
  • Swagger get/post request - working fine
  • ReactJS get request - working fine
  • ReactJS post request - Not working fine

"Access to fetch at 'https://localhost:44352/api/Address/CheckAvailability' from origin 'http://localhost:3000' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

/*ReactJS Code: */

export function saveAddress(address) {
   return fetch(baseURL + "Address/CheckAvailability", {
    method: "POST",
    headers: {
      "Access-Control-Allow-Origin": "*",
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    body: JSON.stringify(address),
  }).then(handleResponse)
    .catch(handleError);
}


/*Dot.Net core Code: */
[HttpPost]
public ActionResult CheckAvailability([FromBody]ReqAddressDetailsDto request)
{

  if ((request) == null)
    {
      return NotFound();
    }
  return Ok(request);
}

Answer 1

If your client application (the React web app) is on another scheme (any of http/https, domain or port is different), you need to have CORS enabled on your ASP.NET Core back-end.

In the Startup.cs file, you need to add this:

In ConfigureServices()

services.AddCors(options =>
        {
            options.AddDefaultPolicy(builder =>
            {
                builder.WithOrigins("http://localhost:3000/")
                .AllowAnyMethod()
                .AllowAnyHeader();
            });
        });

In Configure() put this just before app.UseMvc():

 app.UseCors();

Check this link for more info: https://docs.microsoft.com/en-us/aspnet/core/security/cors

Answer 2

did you enabled / configured cors in this .net core api?

How to enable CORS in ASP.NET Core

Answer 3

You can check CORS headers on your backend script. The CORS standard manages cross-origin requests by adding new HTTP headers to the standard list of headers. The following are the new HTTP headers added by the CORS standard:

• Access-Control-Allow-Origin
• Access-Control-Allow-Credentials
• Access-Control-Allow-Headers
• Access-Control-Allow-Methods
• Access-Control-Expose-Headers
• Access-Control-Max-Age
• Access-Control-Request-Headers
• Access-Control-Request-Method
• Origin

These headers are all important, but let’s we focus on the following header:

• Access-Control-Allow-Origin

You should define Access-Control-Allow-Origin header as '*'. I guess, it may be solved your problem simply. A little example for PHP:

<?php
header("Access-Control-Allow-Origin: *");

You may find an info of each CORS header the following: CORS Headers. If you want to learn more details about CORS, You can follow this link.

Answer 4

This status code is a useful hint to understand that the server doesn’t support OPTIONS requests.

Add the corresponding header on the server side when handling the OPTIONS method. We will then have the following requests:

Access-Control-Allow-Headers : Content-type

Hopefully this solves .