Friday, March 13, 2020

Enabling CORS on asp.net Web API application (with Windows Authentication)

Source: https://forums.asp.net/t/2111551.aspx?Web+API+with+windows+authentication+and+CORS

Client: Vue.js application making a HTTP POST call to Web API

Target: Web API application

On the Target Web API application:
- Install the NuGet package: Microsoft.AspNet.Cors by Microsoft. (v5.2.7 as of this writing)
- In the App_Start/WebApiConfig.cs file

        public static void Register(HttpConfiguration config)
        {
            var corsAttr = new EnableCorsAttribute("https://localhost:44346", "*", "*") { SupportsCredentials = true }; // localhost:44346 is the client vue.js app
            config.EnableCors(corsAttr);

- In the Global.asax.cs file:
        protected void Application_BeginRequest()
        {
            if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
            {
                Response.Headers.Add("Access-Control-Allow-Origin", "https://localhost:44346");
                Response.Headers.Add("Access-Control-Allow-Headers", "Origin, Content-Type, X-Auth-Token, Pragma, cache-control"); //If passing more headers from client, include them here
                Response.Headers.Add("Access-Control-Allow-Methods", "GET, POST, PATCH, PUT, DELETE, OPTIONS");
                Response.Headers.Add("Access-Control-Allow-Credentials", "true");
                Response.Headers.Add("Access-Control-Max-Age", "1728000");
                Response.End();
            }
        }

On the client (Vue.js application):

    this.axios = axios.create({
      headers: {
        'Content-Type': 'application/json; charset=utf-8',
        'Accept': 'application/json',
        'Cache-Control': 'no-cache',
        'Pragma': 'no-cache'
      },
      withCredentials: true
    });

HTTP POST can be this.axios.post(url, data, params).
The important thing for Windows auth to be passed to target is to include the "withCredentials".