文章背景
项目中大家总会遇到说跨域的问题，总是报500,可是大家明明都已经配置了跨域的选项，不论前端还是后台。这种看似很小的问题，却让你头疼不已。甚至会耽误最主要的功能，比如过有一个接口是统一登录，那么虽然不耽误之后的开发，但是项目运行起来，卡在这里，后续的流程进行就不会顺利，也影响体验，以至于整个项目在临近项目结点的时候，因完不成，而就此报废。那将得不偿失。
（正常跨域配置选项的我就不做讲述了，大家自行百度即可）
遇到的问题
配置跨域项，依然会有出现跨域或者请求失败的现象
情况一：
访问失败
上面这种情况的错误，是前台header请求头的参数，在后台没有接收或者是接收的方式写成了*，解决办法就是让后台接收的 * 改成对应传递的参数名即可。
前台封装的拦截器中header配置
比如图中的Authorization是token字段，那么让后台也配置对应接收参数即可。
怎么看后台接收的是什么，步骤 > F12打开控制台 > Network >看发出的请求，然后左键点击>此时的header 里面就可以看到
请求配置
如果Access-Control-Allow-Headers：* 则让后台改动一下即可。
后台header配置
很是抱歉前台错误截图没有找到，大家就通过我的描述来对应一下吧
在情况一解决的情况下还会出现500的错，而Access-Control-Allow-Methods配置为*的时候，（其中的一种情况是，你的前台不加token就能请求成功，加了就失败的时候）这时的你则需要让后台帮你吧Access-Control-Allow-Methods改为接收具体的方法：如Access-Control-Allow-Methods：GET,PUST,....写上所有你能需要的即可。
修改后的后台header配置
备注：
浏览器的版本现在对通配符*的识别有些失败，估计以后会有优化吧。
其中有token验证的请求，使用通配符* ，如果在火狐浏览器中的话，会有更明显的显示（错误），就是先将我们的请求转变成option请求，来试探请求的接口。报错会让你连token都没传就失败了。
header配置的注意项
以上修改之后基本就解决了额外的情况。希望这篇文章能帮助大家填一填小坑。记得关注走一波，身为小白的我，以后会更加努力。
网友评论