How to enable CORS for .NET API - reactjs

Question

I have an application with React front-end and .NET as API using fetch.
In App.js I have:
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append('Access-Control-Allow-Origin', '*');
myHeaders.append('Access-Control-Allow-Credentials', 'true');
var raw = JSON.stringify({
"userText": e.target.value
});
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow',
};
fetch("https://localhost:7101/api/Game/UserText", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
and for my controller:
[HttpPost]
[Route("UserText")]
public IActionResult GetUserText([FromBody] UserText userText)
{
Console.WriteLine(userText.userText);
return Ok();
}
and in program.cs:
var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
builder.Services.AddCors(options =>
{
options.AddPolicy(name: MyAllowSpecificOrigins,
policy =>
{
policy.WithOrigins("*");
});
});
app.UseCors(MyAllowSpecificOrigins);
I have tried a few things but the error is always the same. Also tried to install the extension for Chrome but the error also stays.
The error message is:
Access to fetch at 'https://localhost:7101/api/Game/UserText' 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.
:7101/api/Game/UserText:1
Failed to load resource: net::ERR_FAILED

Answer 1

You have not provided the error anywhere, but I assume its CORS error you are talking about.
Have you tried allowing all Headers, Methods etc as below?
var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
builder.Services.AddCors(options =>
{
options.AddPolicy(name: MyAllowSpecificOrigins,
policy =>
{
policy.WithOrigins("*")
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials();
});
});
app.UseCors(MyAllowSpecificOrigins);
Note: If you have the specific values for these parameters, its always recommended to use them. For instance, instead of WithOrigins("*"), it should be the WithOrigins(urls) which should have access to the site.