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