cors跨域问题

Posted 2020-09-29 WYcolorful

这两天公司布置一个特别简单的管理系统，增删查改四个接口，前端使用技术（html/css/angularjs），后台（c#/mvc），数据库（mysql）

前端写完，后台写完，在交互的时候就遇到了跨域的问题，在postman上每一个接口都可以正常运行（确定接口是无误的）

以前实验室做项目时用的反向代理（我并不会），后来在网上找了很多方法，比如jsonp，添加header，cors

刚开始用的加header，加了之后get接口可以正常运行，但是其他的接口仍然不能使用，。。。。。。

后来就像尝试以下新的方法，Cors

后台IDE用的vs2015，在Tools里的Nuget里面搜索microsoft.aspnet.webapi.cors。。。。再安装

然后在WebConfig里面添加

<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
</customHeaders>
</httpProtocol>

此时不出意外应该可以了（如果之前加了很多header，这个时候F12控制台可能会出现过多什么的，将之前家的header去掉就行了）

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

但是真正的问题来了，做POST方法的请求时你会发现请求执行了两次，懵逼了很久，还是仔细看了以下F12中response的内容，两次请求中Request-mothod是不同的，第一次是options，第二次才是POST请求（第一次是空的提交，即如果是ADD操作就会先添加一条空的记录，然后再添加实际要添加的记录）。话说百度了好多，大家说的都差不多第一次options请求就是预检请求，客户端收到对预检请求的返回值后才进行真正的POST请求（https://zhuanlan.zhihu.com/p/24411090）详细的介绍。

关于怎么去掉这个options请求，我个人认为是去不掉的，只能在后端做处理，我在我的接口里面加了下面的语句

Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, x-requested-with, X-Custom-Header");
if ("OPTIONS".Equals(Request.HttpMethod))
{
Response.StatusCode = 204;（http://blog.sina.com.cn/s/blog_6998d7bd01017zl2.///////////htmlResponse.StatusCode的HTTP状态代码列表）
return 1;

}

这个时候断点查看接口运行过程还是请求了两边但是前端界面反应的终于是添加了一次记录了。

 

 

当然解决跨域方法很多。。。。。。。。。。还可以尝试使用其他的。