how can i solve cors issue in react js

Question

i am using all headers methodproxy 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.

Sachin Singh · Answer

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.

Sachin Singh · Answer

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(); }); }

Sachin Singh · Answer

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 />

selvi jp · Answer

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

Sachin Singh · Answer

Are you still getting CORS errors or something else? Your code is fine and there should not be any CORS related error now.

Sachin Singh · Answer

haha omg this is constant. public class Startup { readonly string MyAllowSpecificOrigins = _myAllowSpecificOrigins ; // here

Sachin Singh · Answer

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.