跨域问题不一定真的是跨域了???

简介: 跨域问题不一定真的是跨域了???

文章背景

项目中大家总会遇到说跨域的问题,总是报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配置的注意项

以上修改之后基本就解决了额外的情况。希望这篇文章能帮助大家填一填小坑。记得关注走一波,身为小白的我,以后会更加努力。

相关文章
|
7月前
“跨域”问题理解
“跨域”问题理解
57 0
|
4月前
|
存储 JSON JavaScript
跨域问题
跨域问题
64 1
|
1月前
|
JSON 缓存 前端开发
什么是跨域
什么是跨域
31 1
|
1月前
|
Web App开发 JavaScript 开发者
跨域处理
跨域处理
24 0
|
JSON 前端开发 JavaScript
解决跨域问题
解决跨域问题
|
7月前
|
安全
什么是跨域?
什么是跨域?
|
7月前
|
Web App开发 前端开发 JavaScript
你能讲一下跨域吗
你能讲一下跨域吗
|
7月前
|
JSON 前端开发 安全
你了解跨域吗
你了解跨域吗
63 0
|
Web App开发 JSON 前端开发
跨域问题总结
跨域问题总结
1042 0
跨域问题总结
CorsConfig 跨域 初认识
CorsConfig 跨域 初认识
213 0