how can i solve cors issue in react js

selvi jp

i am using all headers method,proxy, in my fetching but they doesnt work

from origin 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.

7 Replies

Know the answer? Post it — somebody with the same question will find it here.

selvi jp5y ago
Hi,
When i work in Localhost Im not getting Cors . When i host to cloud server im getting an Cors error. Do you have any idea ?

Thanks in Advance
+1
Sachin Singh5y ago
now, there is just one possibility left, you forgot to register some of the services that you are using in ASP.NET Core API.
see,
When there's an exception in your ASP.NET Core project, the CORS headers are cleared.

so, make sure, you have registered each and every service required by your API Controllers, especially for the current call
For example, if the current call needs MessageService under controller then it must be registered otherwise, your CORS headers will be cleared.
services.AddScoped();

to test this , perform an request from postman and make sure you are not getting 500 error or CORS error. First chek the status code
is not 500.
+1
Sachin Singh5y ago
Are you still getting CORS errors or something else?
Your code is fine, and there should not be any CORS related error now.
+1
Sachin Singh5y ago
see, you get confused with what I am saying, I am trying to secure your app, by just giving access to your react app and no other app in the world, however for testing purposes you can allow everyone.
use this, the simplest one
public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(o => o.AddPolicy("MyPolicy", builder =>
    {
        builder.AllowAnyOrigin() // notice here
               .AllowAnyMethod()
               .AllowAnyHeader();
    }));

    // ...
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.UseRouting();

        app.UseCors(); // notice here


        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });
    }
+1
Sachin Singh5y ago
haha, omg, this is constant.
public class Startup
{
    readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins"; // here
+1
Sachin Singh5y ago
yes, one is for live URL, if your App is already hosted. The second is for Development purposes that is the localhost URL of react app
Both are the Url for your React App. For now, just use the localhost URL of your React app as your APP is in the development stage currently, I think.
+1
Sachin Singh5y ago
if you are using ASP.NET Core API then paste the below lines of code under the Startup
public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors(options =>
        {
            options.AddPolicy(name: MyAllowSpecificOrigins,
                              builder =>
                              {
                                  builder.WithOrigins("http://example.com",
                                                      "http://localhost:1234/");// your react app
                              });
        });

       services.AddControllers();
    }

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.UseRouting();

        app.UseCors(MyAllowSpecificOrigins); // notice here

        // app.UseResponseCaching();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });
    }
If you are fetching data from ASP.NET Web API then paste the below code under web.config
         "Access-Control-Allow-Headers" value="accept, content-type" />
         "Access-Control-Allow-Origin" value="https://localhost:44363"/>
         "Access-Control-Allow-Methods" value="POST, GET, OPTIONS" />
+1