这段时间接手了一个新需求,将一个ASP.NET MVC项目改成前后端分离项目。前端使用Vue,后端则是使用ASP.NET WebApi。在搭建完成前后端框架后,进行接口测试时发现了一个前后端分离普遍存在的问题跨域(CORS)请求问题。因此就有了这篇文章如何启用ASP.NET WebApi 中的 CORS 支持。
index.umd.min.js:1 OPTIONS http://localhost:1204/api/Login/ShopKeeperLogin 405 (Method Not Allowed)
在项目Global.asax中添加对OPTIONS方法的处理:
/// <summary>
/// 跨域设置(预请求响应问题)
/// </summary>
protected void Application_BeginRequest()
{
//OPTIONS请求方法的主要作用(预请求,判断是否能够请求成功):
//用来检查服务器的性能。如:AJAX进行跨域请求时的预检,需要向另外一个域名的资源发送一个HTTP OPTIONS请求头,用以判断实际发送的请求是否安全。
if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
{
//表示对输出的内容进行缓冲,执行page.Response.Flush()时,会等所有内容缓冲完毕,将内容发送到客户端。
//这样就不会出错,造成页面卡死状态,让用户无限制的等下去
Response.Flush();
}
}
Access to XMLHttpRequest at 'http://localhost:1204/api/Login/ShopKeeperLogin' from origin 'http://localhost:8081' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
在Web.config中找到system.webServer标签里面添加如下配置:
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="*" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
</customHeaders>
</httpProtocol>