解决POST请求跨域问题

解决POST请求跨域问题

今天在做项目的时候。出现了POST请求跨域失败，而GET请求跨域成功的很奇怪的情况，自己为此研究了好久，特此做个记录。

场景：前端发起POST请求后端接口时，报错，错误如下：

初始问题分析：

其实原来在后端管理页面也出现过类似的错误，看到CORS error，初步考虑是跨域问题。由于原来在后端代码中已经全局添加了corsfilter解决跨域问题，为此刚开始拟定的解决方案为：添加允许跨域的域名。

结果失败，错误仍旧。

再次对比后端跨域成功的请求与此次请求的区别。发现成功的是get请求于是怀疑是因为POST请求的问题，于是测试成功跨域的后端管理系统POST请求是否可以正常跨域，以及前端GET请求是否可以正常跨域，发现结果均正常，自此问题僵住。然后去网上查资料发现，对于跨域请求有简单请求和特殊请求之分，对比失败的POST请求与成功的POST请求。发现，失败的POST请求其实是发了两次，而成功的POST请求发了一次，仔细回顾两个POST请求的不同，发现失败的POST请求求请求参数是JSON，符合特殊跨域请求，所以会先发送preflight请求，确定服务器是否允许跨域。如下图：

其相对于简单请求多出了：

• Access-Control-Allow-Methods：允许访问的方式
• Access-Control-Allow-Headers：允许携带的头

考虑原来代码里面已经添加过相关的信息，但是唯一的出错点就在这个地方，于是回顾代码：

发现将addAllowHeader写成了addAllowedMethod，修正后，成功跨域。

原因分析：

未允许携带头信息，而失败POST请求是携带了头信息的（content-type），所以preflight预检失败，而简单请求之所以成功，是因为简单请求未发送预检信息。而特殊请求在Request Headers里面多出了上文提及的两个字段，所以未通过corsfilter，服务器返回了403.

教训：

根据局部性原理，以后出现问题，一定要首先排查相应的代码方法有没有写错，排除一些低级错误带来的影响。