前言:
这段时间接手了一个新需求,将一个asp.net mvc项目改成前后端分离项目。前端使用vue,后端则是使用asp.net webapi。在搭建完成前后端框架后,进行接口测试时发现了一个前后端分离普遍存在的问题跨域(cors)请求问题。因此就有了这篇文章如何启用asp.net webapi 中的 cors 支持。
一、解决vue报错:options 405 method not allowed问题:
错误重现:
index.umd.min.js:1 options http://localhost:1204/api/login/shopkeeperlogin 405 (method not allowed)
解决方法:
在项目global.asax中添加对options方法的处理:
///
/// 跨域设置(预请求响应问题)
///
protected void application_beginrequest()
{
//options请求方法的主要作用(预请求,判断是否能够请求成功):
//用来检查服务器的性能。如:ajax进行跨域请求时的预检,需要向另外一个域名的资源发送一个http options请求头,用以判断实际发送的请求是否安全。
if (request.headers.allkeys.contains("origin") && request.httpmethod == "options")
{
//表示对输出的内容进行缓冲,执行page.response.flush()时,会等所有内容缓冲完毕,将内容发送到客户端。
//这样就不会出错,造成页面卡死状态,让用户无限制的等下去
response.flush();
}
}
二、解决asp.net webapi 跨域资源共享-cross origin resource sharing(cors)问题:
错误重现:
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.
允许所有来源,http方法,请求标头跨域:
在web.config中找到system.webserver标签里面添加如下配置:
指定对应来源,http方法和请求标头跨域:
详情参考微软官方文档:https://docs.microsoft.com/zh-cn/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api#set-the-allowed-origins