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