记一次上传图片到阿里云oss存储跨域的报错 Access to XMLHttpRequest at 'xxx' from origin 'xxx'

背景：迁移项目上传图片到阿里云的oss存储报跨域错误

报错信息一：Access to XMLHttpRequest at 'xxxxx' from origin 'xxxxxxxxx' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

错误原因：

浏览器安全问题，本地路径和目标路径不是同一个域名下引起的跨域问题
解决方法也很简单，因为浏览器解析域名的时候会先看下hosts有没有，如果本地hosts存在该域名就会使用改域名
1.设置本地hosts
127.0.0.1 test.com
2.设置代理
可以在webpack的proxy设置也可以用nginx设置，个人喜欢nginx更符合线上环境

   server {
        listen       80;
        server_name   test.com;
        location /{
            proxy_pass http://127.0.0.1:xxx;// 你的项目端口
        }
   }

设置完这两步一般都可以解决大部分的代理问题

报错信息二：Access to XMLHttpRequest at 'xxxxxx' from origin 'xxxx' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

网上找了各种花里胡哨答案，，，没用，后面发现只需要设置一个属性就解决了
withCredentials: false,
完美解决图片上传跨域问题

  axios({
      url: "xxx",
      method: "POST",
      data,
      withCredentials: false,
       }).then(res => {
  });

发现是同事在axios请求中添加了这个代码，醉了。。。。。。。

axios.defaults.withCredentials = true;//

后面去MDN查了下这个属性：

XMLHttpRequest.withCredentials 属性是一个Boolean类型，它指示了是否该使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制（cross-site Access-Control）请求。在同一个站点下使用withCredentials属性是无效的。
此外，这个指示也会被用做响应中cookies 被忽视的标示。默认值是false。
如果在发送来自其他域的XMLHttpRequest请求之前，未设置withCredentials 为true，那么就不能为它自己的域设置cookie值。而通过设置withCredentials 为true获得的第三方cookies，将会依旧享受同源策略，因此不能被通过document.cookie或者从头部相应请求的脚本等访问
浏览器兼容性
[1]IE8 和IE9通过使用 XDomainRequest 支持跨域请求
[2] 从 Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8)开始, Gecko 不允许在同步请求下使用withCredentials 属性.尝试这么做将会导致浏览器抛出 NS_ERROR_DOM_INVALID_ACCESS_ERR exception的错误.

总结：

withCredentials默认值为false，在获取同域资源时设置 withCredentials 没有影响。
true:在跨域请求时,会携带用户凭证
false:在跨域请求时,不会携带用户凭证;
返回的 response 里也会忽略 cookie

最后编辑于：2020.05.12 17:13:04