阿里云配置完跨域规则后还是报错:‘Access-Control-Allow-Origin‘ header is present on the requested resource

最新推荐文章于 2024-05-03 21:50:02 发布
最新推荐文章于 2024-05-03 21:50:02 发布
阅读量1.3k 收藏
点赞数
分类专栏： vue 阿里云 oss 文章标签： 阿里云 vue web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44984864/article/details/115406110
版权
vue 同时被 3 个专栏收录
13 篇文章 0 订阅
订阅专栏
阿里云
5 篇文章 0 订阅
订阅专栏
oss
3 篇文章 0 订阅
订阅专栏

前端获取到存储在阿里云oss的图片后,加载不成功,报错:

'Access-Control-Allow-Origin' header is present on the requested resource

然后根据网上的教程添加了oss的跨域规则,CORS,还是不行.
提了个工单询问,原来是因为使用的cdn加速,所以需要在cdn侧,加上响应头Access-Control-Allow-Origin.

步骤如下:
  1. 登录CDN控制台。
  2. 在左侧导航栏，单击域名管理。
  3. 在域名管理页面，单击目标域名对应的管理。
  4. 在指定域名的左侧导航栏，单击缓存配置。
  5. 单击自定义HTTP响应头页签。
  6. 单击添加，配置自定义HTTP响应头
    在这里插入图片描述
    添加如下规则:
    在这里插入图片描述

问题完美解决!

官网文档: https://help.aliyun.com/document_detail/27137.html?spm=5176.smartservice_service_chat.0.0.42e73f1blnUANL

我就叫贝塔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决阿里云访问OSS图片跨域问题 No ‘‘Access-Controller-Allow-Origin‘ herder is present on the requested resource.
weixin_43844189的博客
11-05 1368
这个问题搞了我两天时间，头发都掉了不少，真的是难受啊，好在不断的在网上查资料，终于找到了这个原因。 刚刚开始还以为是引入的cropperjs的问题，但是反复测试，问题依旧，从而想到了是不是阿里云OSS的问题，要设置一个跨域，然后就找到了，话不多说，先把我的报错信息给大家参考一下： 解决方法： 1、打开阿里云OSS控制台 2、进入对象存储——>Bucket列表——>Bucket名称——>权限管理，——>跨域访问 如图： 3、创建规则 其他的默认 其中暴露 Headers的值 Et
阿里云服务器部署前后端分离项目跨域,前后端分离项目，如何解决跨域问题？...
weixin_39878745的博客
08-12 742
跨域资源共享(CORS)是前后端分离项目很常见的问题，本文主要介绍当SpringBoot应用整合SpringSecurity以后如何解决该问题。什么是跨域问题CORS全称Cross-Origin Resource Sharing，意为跨域资源共享。当一个资源去访问另一个不同域名或者同域名不同端口的资源时，就会发出跨域请求。如果此时另一个资源不允许其进行跨域资源访问，那么访问的那个资源就会遇到跨域问...
正确解决No ‘Access-Control-Allow-Origin’ header is present on the requested resource异常的有效解决方法
最新发布
wbajsjhhhhh的博客
05-03 6856
正确解决No ‘Access-Control-Allow-Origin’ header is present on the requested resource异常的有效解决方法
阿里云OSS请求文件跨域问题Access-Control-Allow-Origin
超威半导体
06-01 2308
跨域问题网上很多解决方案提示到这里配置但是不生效，一定要勾选Vary:Origin这个选项，请求的时候浏览器记得请求在控制台要清理缓存。
阿里云ECS服务器 跨域Access-Control-Allow-Origin 问题
清流弯弯
04-25 1073
目录 现象： 解决： 1、连接FTP 2、默认网站配置路径 3、自定义配置路径处修改 4、如果FTP方式无权限，就得使用VIM方式编辑 现象： 本地网页，使用JS.load 加载阿里云ECS 资源时，出现跨域问题 $("#youshengHeader").load('http://gudianxiaoshuo.com/js/youshengHeader.html ',function(){}); 解决： 1、连接FTP 2、默认网站配置路径
【实战晋级】理解跨域以及工作中跨域问题的处理 - 1
zz_jesse的博客
10-12 272
写在前面相信大部分前端工程师在日常工作中经常使用 xhr 或者 fetch 从后端 api 里取数据然后进行二次处理，随后渲染到页面。所以这个跨域问题也就屡见不鲜，当然在...
阿里云 两个vue项目部署到nginx，并同时实现跨域请求
liuxy_236的博客
12-15 1155
现在有两个项目stock，stock_news,想要将这两个项目同时部署到阿里云CentOS服务器 1、前期准备， 安装nginx对于阿里云如何安装nginx，请参考我的另外一片文章《yum方式 阿里云CentOS7+ 安装nginx》 两个项目vue已经打包成dist文件，阿里云上位置如下 /home/stock/dist /home/stock_news/dist 端口准备：入口8...
Nginx跨域设置Access-Control-Allow-Origin无效的解决办法
01-10
add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET,POST'; 使用以下配置，生效。 if ($request_method = '...
静态文件访问不到报No Access-Control-Allow-Origin处理办法
06-11
静态文件访问不到报No 'Access-Control-Allow-Origin' header is present on the requested resource处理办法
Allow-Control-Allow-Origin
09-20
解决浏览器跨域请求出现No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.问题
Nginx解决转发地址时跨域的问题
01-20
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 这就是跨域问题。解决方案有不少，比较好的是服务器端配置CORS，但要求服务器端...
快速解决Canvas.toDataURL 图片跨域的问题
01-19
【Redirect at origin ‘http://sub1.xx.com’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource....
阿里云配置解析二级域名+宝塔设置域名
qq_39636712的博客
10-27 2462
1、进入阿里云官方网站，控制台，点击域名 2、找到你要解析的主域名。点击这行的解析 3、点击添加记录，记录类型选择默认的，主机记录这里添加一个名称你项目的就行，这就是你的二级域名了 4、解析线路选择默认 5、记录值。ip地址就行，点击确认 6、一般情况下，有两分钟就行，不行就多等一会。至此域名解析完成 7、服务器添加域名，linux 要自己配置了，改一下host文件，改一下服务文件，这里主要说宝塔 进入宝塔，选择网站，点击设置，把你刚才解析的二级域名填入框中，点击添加。完毕 ...
阿里云服务器部署GeoServer以及跨域处理
Arcgiser的博客
01-27 837
1.登录完成阿里云服务器，并下载GeoServer：点击下载链接。 2.GeoServer配置的具体安装方法可以访问 “该篇博客” 的内容。 3.在阿里云服务器ECS的控制台，点击网络与安全——安全组，在安全组列表的操作——配置规则，手动添加访问规则。 4.配置完成后在其他设备可以通过ip地址访问服务器已经启动的GeoServer，但是通过前端调用服务器上的GeoServer发布的影像，需要处理跨域问题。打开本地存储GeoServer的位置，打开"C:\Program Files(x86)\GeoS
阿里云OSS No ‘Access-Control-Allow-Origin‘ header is present on the requested resource问题解决
旭东怪的博客
03-30 2248
来源：指定允许的跨域请求的来源。Allowed Methods：指定允许的跨域请求方法。Allowed Headers：指定允许的跨域请求 header。Exposed Headers：指定允许用户从应用程序中访问的响应头（例如一个 Javascript 的 XMLHttpRequest 对象)。1、阿里云OSS没有设置跨域规则，前端往阿里云oss服务器上传文件时，会报跨域错误。
阿里云OSS, 跨域请求, No ‘Access-Control-Allow-Origin‘
Maynor的博客
04-01 616
错误标签：阿里云OSS, 跨域请求, No ‘Access-Control-Allow-Origin’浏览器具体报错内容： Access to XMLHttpRequest at ‘https://xxx.oss-cn-guangzhou.aliyuncs.com/xxx.jpg’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is pr
ionic+angularJs访问阿里云oss 图片跨域问题导致get请求报Access-Control-Allow-Origin
u012381782的博客
11-03 516
阿里云图片服务器需要设置跨域规则
No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
热门推荐
cxy213的博客
10-27 1万+
在写基于vue +element 的图片上传中 点击上传图片 会发现有些图片可以上传，有些上传不了，还会报这个错 这个错误翻译过来就是 ： 请求的资源上不存在“Access Control Allow Origin”标头。 但是还是不知道怎么做 百度一些后 说是跨域问题 解决办法也都是跟后端有关系的 在后端设置允许跨域 或者加头信息 但是对于我们使用框架里面的组件来说 设置后端是不可能的 就当我以为没法做了的时候 在百度其他问题的时候 偶然看到了一个熟悉的字眼 :headers="{ ‘Content
uniapp报错 No 'Access-Control-Allow-Origin' header is present on the requested resource
01-23
根据提供的引用内容，当uniapp报错显示"No 'Access-Control-Allow-Origin' header is present on the requested resource"时，可以采取以下两种处理办法： 1. 在后端服务器中设置响应头信息，允许跨域访问。可以在服务器端的响应中添加"Access-Control-Allow-Origin"头字段，并设置为"*"，表示允许来自任何域的请求访问资源。例如，在Node.js中使用Express框架可以这样设置： ```javascript app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); }); ``` 2. 使用代理服务器进行请求转发。可以在uniapp的配置文件（vue.config.js或者nuxt.config.js）中配置代理服务器，将请求转发到后端服务器，以避免跨域问题。例如，在vue.config.js中可以这样配置： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://backend-server.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 以上是两种处理"No 'Access-Control-Allow-Origin' header is present on the requested resource"报错的方法，根据具体情况选择适合的方式进行处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值