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

最新推荐文章于 2025-03-03 14:17:17 发布

奈何-1912*

最新推荐文章于 2025-03-03 14:17:17 发布

阅读量2.9k

点赞数 2

文章标签： uni-app vue.js 前端 javascript 阿里云

本文链接：https://blog.csdn.net/github_53963510/article/details/132100859

版权

本文详细阐述了跨域问题的成因、常见现象，以及提供了解决方案，包括前端请求头添加Access-Control-Allow-Origin、后端设置响应头、OSS跨域配置和使用Nginx处理跨域问题的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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/;
 }