ASP.NET Framework MVC CORS Error Axios - C#

This article discusses how to handle CORS (Cross-Origin Resource Sharing) errors when using Axios with ASP.NET Framework MVC (Model-View-Controller) in C#.

Background

CORS is a security measure in web browsers that restricts scripts from accessing resources outside of their domain. This restriction is enforced by the browser and is designed to protect users against malicious scripts.

In an ASP.NET Framework MVC application, CORS errors may occur when requesting data from a different domain using Axios. The server-side application needs to enable CORS on the server-side to allow cross-origin requests.

Enabling CORS

To enable CORS in an ASP.NET Framework MVC application, the server-side application needs to add CORS middleware to the application pipeline.

Install CORS package

To use CORS middleware in an ASP.NET Framework MVC application, you first need to install the Microsoft.AspNet.WebApi.Cors package from NuGet.

Install-Package Microsoft.AspNet.WebApi.Cors

Enable CORS

After installing the package, add the following code to the Configure method of the Startup class to enable CORS:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // ...
    app.UseCors(builder =>
    {
        builder.AllowAnyOrigin()
            .AllowAnyHeader()
            .AllowAnyMethod();
    });
    // ...
}

This code allows any method, any header, and any origin to access the server. You should adjust the settings, depending on the needs of your application.

Handling CORS Errors with Axios

After enabling CORS on the server-side, you may still encounter CORS errors on the client-side when using Axios. This could happen if the client-side code is making the request with the wrong origin or if the server-side application is not correctly configured.

To handle CORS errors with Axios, you need to set the withCredentials option to true and configure the server-side application to allow requests with credentials.

Client-side Configuration

To make requests with credentials using Axios, set the withCredentials option to true:

axios.get('https://example.com/api/data', { withCredentials: true })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

Server-side Configuration

To allow requests with credentials on the server-side, add the following code to the Configure method of the Startup class:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // ...
    app.UseCors(builder =>
    {
        builder.WithOrigins("https://example.com")
            .AllowCredentials()
            .AllowAnyHeader()
            .AllowAnyMethod();
    });
    // ...
}

This code allows requests from the https://example.com domain with credentials. Change the origin value to the domain allowed to make requests.

Conclusion

This article discussed how to handle CORS errors when using Axios with ASP.NET Framework MVC in C#. By enabling CORS on the server-side and setting the withCredentials option to true on the client-side, you can allow cross-origin requests while maintaining security.