新手对跨域的误解以及Credentials对跨域配置的坑

在学习过程中&＃xff0c;跨域似乎很简单&＃xff0c;无非就是“当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域”&＃xff1b;
无非就是“后端加一下跨域的相关响应头即可”。

但是在前后联调过程中&＃xff0c;发现跨域并没有那么容易解决。

后端环境是springboot&＃xff0c;一开始用的重写WebMvcConfigurer里面的addCorsMappings&＃xff0c;添加相应的响应头&＃xff0c;但是发现无效。

百度一下猜测可能是因为过滤器链的顺序问题&＃xff0c;因此单独写了一个Filter并将order设为较靠前的位置。

然而&＃xff0c;设置的ACCESS_CONTROL_ALLOW_ORIGIN明明是“*”&＃xff0c;但是前端得到的却是火狐的一个扩展&＃xff08;具体值我不记得了&＃xff09;。
&＃xff08;后面大概猜测到&＃xff0c;由于我用的是火狐插件Rester进行的接口测试&＃xff0c;因此origin自带为火狐扩展的专用默认值&＃xff09;

前端要求必须看到“*”号&＃xff0c;于是上nginx反向代理&＃xff0c;配置参考

但是&＃xff0c;前端有多名人员&＃xff0c;其中有人成功进行了跨域访问&＃xff0c;还有个哥们一直跨域失败。
难道跨域配置在前端还做了什么拦截吗&＃xff1f;

经过排查&＃xff0c;那位跨域失败的兄弟发现将axios的所有config删除后就能正常访问了。

但是&＃xff0c;按理来说&＃xff0c;不可能为了跨域就不让用axios的config了&＃xff0c;所以应该是其中的某个配置造成的问题&＃xff0c;不过具体的原因那个前端没有跟我说&＃xff0c;我也不大清楚。

本以为解决了&＃xff0c;结果前端很快跟我说&＃xff0c;get可以访问&＃xff0c;post依旧存在跨域。

一环扣一环&＃xff0c;于时又是一波折腾&＃xff0c;中间的曲折过程就不说了。

最终发现&＃xff1a;
Credentials设为 true之后&＃xff0c;Access-Control-Allow-Origin就不能设置为 * 了&＃xff01;
因此需要将Credentials设为false&＃xff0c;然后前端就能得到Access-Control-Allow-Origin&＃61;*&＃xff1b;
而此时&＃xff0c;nginx设置的headers信息就需要注释掉&＃xff0c;不然存在多重重复头信息&＃xff0c;也会报错。

Credentials是用与COOKIE校验的&＃xff0c;如果要设为true&＃xff0c;则进行如下配置
responce.set(‘Access-Control-Allow-Origin’, request.get(‘origin’));
但是这样&＃xff0c;&＃39;Access-Control-Allow-Origin’拿到的就不是*&＃xff0c;而是每个访问端的专属Origin。

此外&＃xff0c;我个人对跨域一直存在误解&＃xff0c;比如那个兄弟跟我说/api/sms有跨域限制&＃xff0c;于是我用postman\浏览器测试了该接口&＃xff08;项目已经部署在服务器中&＃xff0c;我这里的测试也属于远程调用&＃xff09;&＃xff0c;发现没有跨域问题&＃xff0c;而且正常返回了ACCESS_CONTROL_ALLOW_ORIGIN&＃xff1a;"*"。
新手大概看不出来这有什么问题&＃xff0c;这就是对跨域的误解。

我以为项目部署在远程&＃xff0c;地址是121.123.123.8&＃xff0c;而我的本机地址是142.11.32.11&＃xff08;瞎写的&＃xff0c;突出不一致&＃xff09;&＃xff0c;于是我就以为这就是跨域访问了&＃xff0c;毕竟地址都不一样了。
然而&＃xff0c;跨域的含义不是这样&＃xff0c;跨域是指“在同一个页面中协议、域名、端口三者存在不一致”&＃xff0c;我一直突出协议、域名、端口不一致&＃xff0c;忽略了最关键条件“在同一个页面中”&＃xff0c;因此凡是单接口请求一般是测不出跨域的&＃xff0c;postman、浏览器等其他接口测试工具是没有跨域问题的&＃xff0c;他们根本就没有页面差异或者说根本没有页面概念。

前后端之所以有跨域问题&＃xff0c;是因为前端也是运行在一个http容器里面的&＃xff0c;整过前端项目的都知道&＃xff0c;运行项目的时候也是通过localhost:8080进行访问的&＃xff0c;这就是“当前页面url”。
如果在其中请求localhost:8081下的一个接口&＃xff0c;此时就是“同一个页面中端口不一致”&＃xff0c;就发生了跨域。

另外&＃xff0c;有大佬说postman的较新版本是模拟前端环境进行测试的&＃xff0c;因此跨域也是可以测出来的&＃xff08;也有另一个大佬说postman不存在跨域问题&＃xff09;水平有限&＃xff0c;具体的我也没测出来。

更新

本来好好的&＃xff0c;结果前端同学依旧发生了跨域&＃xff0c;而nginx配置正常。

整了一整天&＃xff0c;最终终于解决。

在nginx对OPTIONS请求进行额外处理&＃xff1a;

在跨域过程中&＃xff08;PUT、DELETE、发送JSON数据请求&＃xff09;&＃xff0c;会先发送一次预检OPTIONS请求&＃xff0c;然而不知道为什么OPTIONS没有通过上图所示红框的上半部分&＃xff08;印象中OPTIONS似乎为了节省资源&＃xff0c;省略了很多东西&＃xff0c;所以可能没有执行该部分&＃xff09;

顺便提供一下其他相关资料。

忽略掉OPTIONS请求&＃xff1a;

大佬参考的文章

阮一峰跨域详解&＃xff0c;强推