ERORR when fetching POST method in React Native to ASP.NET

Question

Hi, I have an error with - fetch that been blocked "by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers" .

Each method as GET, POST makes an error, but due to different requests.
Now I really don't know why is this happening and I worked for hours to search that cause and solution, it's the same error as I had with e GET but needs different changes which I don't know what (frustrating)
I tried many changes for the POST function below but didn't worked!

Games.js

    const postResulttoDB = async () => {   
    let gameData = {   
      user1: gameResult.p1,   
      user2: gameResult.p2,   
    };   
    try {   
       const fetchResponse = await fetch(URL, {   
        method: 'POST',   
        headers: {   
           'Content-type': 'application/json; charset=UTF-8',   
        },   
        body: JSON.stringify(gameData)   
      });   
      const data = await fetchResponse.json();   
      return data;   
    } catch (err) {   
      return console.log('error catch', err);   
    }   

Program.cs - GET method function is working with this code

var _Policy1 = "Policy1";    
var builder = WebApplication.CreateBuilder(args);   
   
builder.Services.AddCors(options =>   
{   
    options.AddPolicy(name: _Policy1,   
    policy =>   
    {   
        policy.WithOrigins("http://example.com",   
                            "http://www.contoso.com",   
                            "http://localhost:19008",   
                             "http://localhost:19009").AllowAnyMethod();    
    });       
});   
       
builder.Services.AddControllers();   
builder.Services.AddEndpointsApiExplorer();   
builder.Services.AddSwaggerGen();   
   
var app = builder.Build();   
   
 if (app.Environment.IsDevelopment())   
{   
    app.UseSwagger();   
    app.UseSwaggerUI();   
}   
   
app.UseHttpsRedirection();   
app.UseStaticFiles();   
app.UseRouting();   
app.UseCors(_Policy1);      
app.UseAuthorization();   
app.MapControllers();   
app.Run();   

Access to fetch at 'http://www.whatywant.com/api/SetGameResults' from origin 'http://localhost:19008' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
POST http://www.whatywant.com/api/SetGameResults net::ERR_FAILED

Addition

With that I get no error but still no data is being passed to the Database, I see no error -
js

 body: JSON.stringify(gameData),  
   method: 'POST',  
 headers: {  
   Accept: 'application/json',  
     'Content-type': 'application/json; charset=UTF-8',  
    },  

cs

  options.AddPolicy("PolicyPOST",  
        policy =>  
        {  
            policy.WithOrigins("http://example.com",  
                                "http://www.contoso.com",  
                                "http://localhost:19008",  
                                 "http://localhost:19009").AllowAnyHeader()  
                                 .AllowAnyMethod()  
                                 .AllowCredentials();  

I'm glad we have the Q&A here so wonderful people can help.
Thanks in advance!

Answer 1

the error says you are using custom headers (Content-type), but your CORS policy does not allow custom headers. add

.AllowAnyHeader()

Answer 2

Hi @daowdos ,
Microsoft documentation states that if you want to use JavaScript to access resources on the server, then you must call app.UseCors() before app.UseStaticFiles().
https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-6.0#usecors-and-usestaticfiles-order

> Typically, UseStaticFiles is called before UseCors. Apps that use JavaScript to retrieve static files cross site must call UseCors before UseStaticFiles.

app.UseHttpsRedirection();  
app.UseCors(_Policy1);   // This should be above the UseStaticFiles();  
app.UseStaticFiles(); //  Below the UseCors();  

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 3

CORS configuration and coding is server side only. The browser implements the client side. the npm CORS modules are for node based web servers (connect/express).

the asp.net min api configures app.UseEndpoints() automatically.