做一个前后端完全分离的项目,前端是vue.js+elementUI,后端是asp.net的EF。就跨域问题折腾了2天多,加班到12点,实在是要人命。
对于vue不太了解,后端接口很好写,用postman来调试接口都能成功返回数据,配置到服务器上后,前端运行起来就会报405错误,在本地写了个post请求,可以正常返回数据。在网上找了很多资料,可以确定是跨域问题啦~
后来在网上找资料,都是在增加配置允许跨域访问就好。
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Max-Age" value="30" />
<add name="Access-Control-Allow-Methods" value="GET,POST,OPTIONS" />
<add name="Access-Control-Allow-Headers" value="Content-Type,Accept" />
</customHeaders>
放在了配置文件web.config里面,也可放在代码里面
这个的确的解决了405报错,但是到第二天另一个发送post请求的接口又报403错误,而且还说接口头部不允许参数“ID”。我在header中传递了token和ID两个参数,token用来验证用户登录,ID用来直接查询用户信息。
后来又折腾了一天,找了各种办法,没弄出来(周五加班到12点,真是崩溃)。到周一请教同事后发现我的不细心呀~
正确的应该是这样的
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Max-Age" value="30" />
<add name="Access-Control-Allow-Methods" value="GET,POST,OPTIONS" />
<add name="Access-Control-Allow-Headers" value="Content-Type,X-Requested-With,token,ID" />
<!--<add name="Access-Control-Allow-Headers" value="Content-Type,Accept" />-->
<add name="Access-Control-Request-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
</customHeaders>
区别就在我用颜色标注出来的地方,Access-Control-Allow-Headers中用“X-Requested-With”,然后再增加头部需要传递的参数“token”和“ID”。又增加了一个“Access-Control-Request-Methods”。
“Access-Control-Allow-Origin”是允许访问,“*”表示允许所有域名的脚本资源访问,如果为了安全考虑,也可以写上特定的域名(如前端配置的服务器的域名);
“Access-Control-Max-Age”是返回结果(即Access-Control-Allow-Methods和Access-Control-Allow-Headers提供的信息)可以被缓存多久,单位是秒,我的这个就是30秒。如果值为 -1,则表示禁用缓存,每一次请求都需要提供预检请求,即用OPTIONS请求进行检测(即preflight请求-options);
“Access-Control-Allow-Methods”是允许客户端发送的请求方法,一般都是POST,GET,OPTIONS;
“Access-Control-Request-Methods”是通知服务器端会用到哪些请求头部;
“Access-Control-Allow-Headers”这个是我这次比较关键是,2个要求的参数都加在其中。“X-Requested-With”是判断是否是异步请求的,vue的请求都异步请求,因此得加上此项来允许数据获取(我自己的理解,不对可以在评论中说明)。
上面的是写在web.config中的,也可以直接在代码中加
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
{
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, X-Requested-With,token,ID");
HttpContext.Current.Response.AddHeader("Access-Control-Request-Headers", "GET, POST, PUT, DELETE, OPTIONS");
}
总之是难而不会,会而不难呀~~以后一定要细心些~~~
想要查看更多头部的信息可以打开下面的链接
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Allow-Headers