asp.net跨域时被请求服务器端口设置

做一个前后端完全分离的项目,前端是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");

         HttpContext.Current.Response.End();
 }

总之是难而不会,会而不难呀~~以后一定要细心些~~~

想要查看更多头部的信息可以打开下面的链接

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Allow-Headers

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值