使用Vary: Origin解决跨域问题
前言
大部分跨域问题都能使用Access-Control-Allow-Origin响应头解决，而这两天就遇到了一个比较奇怪的跨域问题。
这两天在用nuxt3重构博客前端，在打包上传到oss后发现浏览器只能打开当前的页面，页面跳转失败。
打开浏览器控制台一看，发现oss资源报跨域错误，这就很奇怪了，明明之前测试是没有这种问题的。再次测试发现有两种情况，浏览器在勾选停用缓存选项时是不会有跨域错误的，一旦关闭停用缓存那么这错误就出来了，而我一般调试时都会打开，所以发布前测试未能发现该错误。
然后在oss各种里面各种跨域设置如Access-Control-Allow-Origin: *都加上，还是不能解决。
再次分析资源响应头发现，部分资源上是有Access-Control-Allow-Origin: *的，一部分又没有。
最后在oss配置上发现一个这样的开关 
勾选后果然就不会报跨域错误了。
Vary: Origin
浏览器在一般的
<img>标签下发起的就是个非CORS请求，而在XHR/fetch下默认发起的就是CORS请求；还比如在一般的<script>标签下发起的是非CORS请求（所以才能有jsonp），而在新的<script type="module">中发起的是CORS请求。
如果浏览器同时存在 CORS 和非 CORS 请求，请启用该选项否则会出现跨域问题。
而很不巧的是nuxt打包的就是<script type="module">而且包含跨域和非跨域请求
这就导致了问题的出现。
评论