今天在做项目的时候。出现了POST请求跨域失败,而GET请求跨域成功的很奇怪的情况,自己为此研究了好久,特此做个记录。
场景:前端发起POST请求后端接口时,报错,错误如下:
post跨域?
初始问题分析:
其实原来在后端管理页面也出现过类似的错误,看到CORS error,初步考虑是跨域问题。由于原来在后端代码中已经全局添加了corsfilter解决跨域问题,为此刚开始拟定的解决方案为:添加允许跨域的域名。
页面跨域问题、结果失败,错误仍旧。
再次对比后端跨域成功的请求与此次请求的区别。发现成功的是get请求于是怀疑是因为POST请求的问题,于是测试成功跨域的后端管理系统POST请求是否可以正常跨域,以及前端GET请求是否可以正常跨域,发现结果均正常,自此问题僵住。然后去网上查资料发现,对于跨域请求有简单请求和特殊请求之分,对比失败的POST请求与成功的POST请求。发现,失败的POST请求其实是发了两次,而成功的POST请求发了一次,仔细回顾两个POST请求的不同,发现失败的POST请求求请求参数是JSON,符合特殊跨域请求,所以会先发送preflight请求,确定服务器是否允许跨域。如下图:
其相对于简单请求多出了:
考虑原来代码里面已经添加过相关的信息,但是唯一的出错点就在这个地方,于是回顾代码:
前端跨域请求。发现将addAllowHeader写成了addAllowedMethod,修正后,成功跨域。
原因分析:
未允许携带头信息,而失败POST请求是携带了头信息的(content-type),所以preflight预检失败,而简单请求之所以成功,是因为简单请求未发送预检信息。而特殊请求在Request Headers里面多出了上文提及的两个字段,所以未通过corsfilter,服务器返回了403.
教训:
跨域限制、根据局部性原理,以后出现问题,一定要首先排查相应的代码方法有没有写错,排除一些低级错误带来的影响。
版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间:8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态