reactjs.netasp.net-web-apimozillaincognito-mode

.Net cors policy issue


I have a web project: .Net core API as a backend and React app as a frontend and everything is working fine with every browser except Mozilla private tab. When I run my react app in Mozilla private window this error occurs:

Cross-Origin Request Blocked: ... Reason: CORS request did not succeed

but if my cors policy is not correct how can other browsers connect my backend without any problem? (p.s Mozilla normal tab works fine as well)

Question: what is the problem and how can I fix it?


Solution

  • Here's a lot of same question :) I'm facing same problem now.

    After hundreds attempts i have semi-solition:

    Startup.cs:

    public void ConfigureServices(IServiceCollection services)
    {
      services.AddCors();
      //some other code here...
    }
    
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
      //some code...
      app.UseRouting();
    
      app.UseCors(x => x
                  .SetIsOriginAllowed(origin => true)
                  .AllowAnyMethod()
                  .AllowAnyHeader()
                  .AllowCredentials()
                  .Build());   
    
     app.UseAuthorization();
     //other code
    }
    

    In react application:

    export const loginUser = createAsyncThunk(
      'user/loginUser',
       async function(loginCredentials, {rejectWithValue}) {      
       try {                
           const response = await fetch(`https://localhost:5001/usr/loginuser`, {                
                 method: 'POST',                
                 headers: {                                                                          
                     'Content-Type': 'text/plain',
                     'Accept': 'text/plain',
                 },
                 body: JSON.stringify({loginCredentials})
             });
               
             if (!response.ok) {
                  throw new Error('Server Error!');
            }
    
    //other code
    

    With this code i have situation when most of request are failed (seems like 'fetch canceled' in browser) but about 30% request are successfully. That's why i called it "semi"-solution.

    Have no idea what's happening, because failed and normal requests are identical (headers and body).