迁移项目上传图片到阿里云的oss存储报跨域错误和超时错误

背景：迁移项目上传图片到阿里云的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，文件位置在 c:\windows\system32\drivers\etc
127.0.0.1localhost
2.设置代理
可以在webpack的proxy设置也可以用nginx设置，个人喜欢nginx更符合线上环境

   server {
        listen       81;
        server_name   localhost;
        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

超时错误：request.js:55 errError: timeout of 5000ms exceeded

springboot整合vue实现前后端分离实现图片上传至阿里云对象存储OSS

使用imageCropper实现图片上传：

偶尔会上传成功，但有时会弹出timeout of 5000ms exceeded并且组件显示：

后台查看请求状态为canceled，因为imageCropper默认是异步的，所以在图片未完成上传时就执行了下一步操作，所以导致请求状态码为canceled，所以设置imageCropper的请求为同步即可：

仍然无效，或许是我找到的请求位置有问题，设置失败了。所以，这第一种解决方式算是失败了，但理论上来说是可行的。

第二种解决方式：既然是超时，那么我们就从请求的时间入手，找到src/utils/request.js文件，修改请求超时为50000：

再次测试，上传成功。

第一个问题的原文链接https://www.jianshu.com/p/dcb85fe995ac
第二个问题的原文链接https://www.pianshen.com/article/1953963973/