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".
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".
