请求url图片资源时跨域，报错：has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘header is present

1、原因

跨域是由于浏览器的“同源策略”导致的，只要主机、端口号、协议三者任一不同，都会出现跨域问题。
有些道友会发现同样的接口或请求在postman中进行模拟时，却不会出现这样的问题。这是因为postman不遵守同源策略，所以也不会有跨域问题。

2、现象

跨域报错如下图所示

3、解决办法

1.前端请求头添加Access-Control-Allow-Origin

在该接口的请求头添加

'Access-Control-Allow-Origin': '*';

添加成功后，点击请求接口时的请求标头上会出现该行

2.后端响应头添加Access-Control-Allow-Origin

response.setHeader(“Access-Control-Allow-Origin”,"*");

同理，添加成功后，点击请求接口时的响应标头上会出现该行

3.OSS添加跨域设置

点击登录oss后台 [https://oss.console.aliyun.com/] 选择Bucket列表 选择需要设置的Bucket，选择数据安全，然后选择跨域设置，具体操作如下图所示。
最后点击编辑或新创建规则，进行如下设置

4.检查读写权限

5.nginx设置

先将http图片转存为本地域名下的图片，然后由Nginx设置代理

 location ^~ /third_image/ {
    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-  Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
    proxy_pass https://XXX.com/;
 }

Nginx设置参照：Nginx解决跨域问题 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present

4、写在最后

各位道友解决问题时可先尝试1-3这几种方法。如若不行再尝试第四种，最后一种办法写的稍微简略，可参考原文。