It is a common scenario where a React front-end SPA is calling a .Net Core WebAPI to fetch data. In this case, suppose both Applications are using their respective domains shown below:
React App => http://myfrontend.com
API=> http://myapi.com
CORS (Cross-Origin Resource Sharing) is a standard that works by adding HTTP headers that allow servers to describe the set of origins that are permitted to fetch information using a web browser and the kind of requests that are allowed.
For the API to allow the React App to fetch the data, it has to allow the Origin of the React App. This is a common CORS problem. So if you’re using, say axios or Fetch, to fetch data from the .Net Core WebAPI, it will only succeed if the API allows the domain http://myfrontend.com to call itself.
Below I’ve used the technique of CORS with named policy and middleware:
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
readonly string MyAllowedOrigins = "_myAllowedOrigins";
public IConfiguration Configuration { get; }
public IContainer ApplicationContainer { get; private set; }
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.AddControllers();
services.AddCors(options =>
{
options.AddPolicy(MyAllowedOrigins,
builder =>
{
//Allowing both the localhost and hosted domains.
builder.WithOrigins("http://localhost:3000",
"http://www.myfrontend.com");
});
});
}
//Apply CORS policies to all endpoints via CORS Middleware:
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
//Omitted code
app.UseCors(MyAllowedOrigins);
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
//Omitted code
}
}The example above is how you apply CORS policy globally to all endpoints in your API. You can also use the [EnableCors(“Policy String”)] attribute on your controllers/page-model/action method.
e.g. Applying CORS on Action method:
[EnableCors("_myAllowedOrigins")]
[HttpGet]
public ActionResult<IEnumerable<string>> Get()
{
return new string[] { "test1", "test2" };
}It is recommended to enable CORS either locally or globally and not combine the two approaches.
We can also expose the allowed Headers and http methods the following way:
public void ConfigureServices(IServiceCollection services)
{
services.AddControllers();
services.AddCors(options =>
{
options.AddPolicy(MyAllowSpecificOrigins,
builder =>
{
builder.WithOrigins("http://myfrontend.com", "http://localhost:3000")
.WithHeaders("token")
.WithMethods("OPTIONS", "GET", "POST");
});
});
}You can also allow credentials to be passed to the WebAPI from the Client by chaining the .AllowCredentials method.
Pre-flight requests for OPTIONS method call fails with Windows authentication and gives 401 Unauthorized. This can be worked around by enabling both Windows and Anonymous authentication.
If you are using Windows Authentication in the case of an Intranet Application and also enabled Anonymous Authentication for allowing OPTIONS pre-flight request, then make sure to use [Authorize] and [AllowAnonymous] attributes to the respective endpoints where required. Without using [Authorize], the name of the user is returned
null with context.HttpContext.User.Identity.Name where context is the ActionExecutingContext object. These attributes can be used on Controllers or Actions as required.
Also, make sure to setup the middleware in the correct order for using with UseCors, UseAuthentication and UseAuthorization in the Startup.cs file Configuration.
InTheTechPit 