正文 首页技术分享 经验分享

阿里OSS、腾讯云COS、又拍云对象存储跨域设置

關家三少

因为刚刚把本站对象存储服务转到阿里oss上,又出现一堆小白不能解决的问题~跨域每家设置都不太一样,有相同有不同,对于小白来说,很是苦恼!

终于在工程师的帮助下搞定了~现在把这几个设置方法融合下,省着找度娘都找不到方法!

先说下又拍云的设置方法-此方法转载至李洋博客

昨天模板更新了新增海报、极简阅读、文章分享模式功能,今天白天我就迫不及待的更新了,更新后发现海报生成时无法显示图片。然后去作者官网看了一下说是因为使用CDN或云存储默认未开启跨域导致,由于作者提供的解决方案是腾讯云而我使用的是又拍云,所以设置方法不同,于是我今天就展开了一场大战!

首先我参考作者解决方案需要让云存储(CDN与之相同)的Head响应头返回Access-Control-Allow-Origin参数也就是开启跨域

刚开始我通过提交工单询问如何开启跨域,技术回复我的是在云存储—访问控制—CORS跨域共享进行配置,然后我按照技术提供的方法进行了设置。设置好后还是不好使,我就怀疑是不是CDN的问题,当我把网站解析到了源站后还是不好使,在审查元素中还是提示跨域问题,也看不到头部返回Access-Control-Allow-Origin参数,后来经过了大量的百度与尝试和又拍云技术的帮助下,我最终成功了。

下面给大家分享下如何设置

注:又拍云CDN与云存储配置相同

一、设置CORS跨域共享

进入云存储配置—选择访问控制—CORS 跨域共享

阿里OSS、腾讯云COS、又拍云对象存储跨域设置-关玉江个人博客

阿里OSS、腾讯云COS、又拍云对象存储跨域设置-关玉江个人博客

阿里OSS、腾讯云COS、又拍云对象存储跨域设置-关玉江个人博客

CORS配置按照我上图填写,注意自己网站对应协议。

二、设置边缘规则

进入云存储配置—边缘规则—添加规则

阿里OSS、腾讯云COS、又拍云对象存储跨域设置-关玉江个人博客

阿里OSS、腾讯云COS、又拍云对象存储跨域设置-关玉江个人博客

1、规则名称随便填写

2、功能选择选择HTTP响应头

3、Header域名填写:Access-Control-Allow-Origin   

4、Header 域值填写:*  

5、勾选覆盖原有响应头和break

6、规则状态选启用

以上都设置好后等待5—10分钟左右然后查看跨域

阿里OSS、腾讯云COS、又拍云对象存储跨域设置-关玉江个人博客

成功开启又拍云云存储跨域

接下来贴上腾讯云的设置教程-转载至李洋博客

先说下问题是怎么出现的,在测试的过程中没有任何问题,因为图片一般都是本地服务器的图片,所有不会出现问题,但是网站一旦使用了CDN加速或者图片静态资源,则会出现下图的问题,原因就是跨域导致的,什么是跨域呢?自己百度吧,,,

先来看一张图:无法生成图片是因为域名不一致,

阿里OSS、腾讯云COS、又拍云对象存储跨域设置-关玉江个人博客

具体的错误代码:

151.html:1 Access to Image at 'httPS://www.talklee.com/zb_users/upload/2020/02/202002091581230311844127.jpg' from origin 'http://www.00521.cn' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.00521.cn' is therefore not allowed access.

因为文章的图片是外链,不是本地资源,所以在生成的时候会校验原图是否允许跨域,如果原图片设置了允许那么就不会出现这个问题,一旦出现这个问题就是原图片不允许跨域,如果这个图片别人的,自己没有控制权那就把图片保存到本地,自己上传到网站目录就行了,如果你开启了网站的CDN或者静态图片资源,那么就需要设置跨域,设置Header头,按照以下教程操作,以腾讯云CDN为例(我用的就是这个,没有别的CDN但,步骤基本一致)。

登录腾讯云CDN,然后点击右上方,控制台,然后找到“内容分发网络”(如果没找到内容分发网络,可以点击顶部小加号,自行添加),最后点击域名管理,

阿里OSS、腾讯云COS、又拍云对象存储跨域设置-关玉江个人博客

找到“高级管理”然后往下看,找到“HTTP Header配置”如图:

阿里OSS、腾讯云COS、又拍云对象存储跨域设置-关玉江个人博客

然后点击“添加HTTP Header”参数选择“Access-Control-Allow-Origin”取值可以设置“*”,*代表所有,就是对外开放,其他人也可以使用,如果不想别人使用那么就设置固定的域名,如图直接直接输入域名,例如:“https://00521.cn”设置完成后,点击确定,就是允许00521域名跨域,其他域名不允许。

阿里OSS、腾讯云COS、又拍云对象存储跨域设置-关玉江个人博客

确定提交后等待生效时间就行了。静态资源也是如此设置,什么是静态资源,就是使用了“腾讯云对象存储cos”功能,图片直接上传到远程服务器,一般都说图片的地址是:http(s)://自定义的二级域名.主域名.com(cn),这么说有点懵是么?看下我这个图片地址就明白了:https://res.talklee.com/k-banner-yun/onelee.jpg

res是我自己设置的静态资源域名,这种域名设置参考上面的内容分发网络教程,同理其他CDN设置基本一致,如果您对以上教程有疑问,请直接联系站长。

最后,附上阿里云跨域设置教程

阿里云OSS的设置也是大同小异不过呢,要相对复杂一点,先进入到Bucket列表找到要设置的实例-进入实例-在概览下边有个跨域访问,进入设置

阿里OSS、腾讯云COS、又拍云对象存储跨域设置-关玉江个人博客

进入之后,开始创建规则。

阿里OSS、腾讯云COS、又拍云对象存储跨域设置-关玉江个人博客

看到这,有很多人会说,这不是和又拍云一样的设置就可以了么?最开始我也是这样合计的,不过啊~我这样设置了一晚上,问了一晚上的度娘都没有响应,疯了~

后来实在受不了了,我提交工单询问的工程师~工程师的回复如下:

阿里OSS、腾讯云COS、又拍云对象存储跨域设置-关玉江个人博客

阿里OSS、腾讯云COS、又拍云对象存储跨域设置-关玉江个人博客

设置方法是:https://help.aliyun.com/document_detail/31903.html?spm=a2c4g.11174283.6.1124.369f7da2kWLpA2

设置内容如下:

来源:*

允许method:全部勾选

允许headers: *

暴露header:

   Etag

   x-oss-request-id

其他保持默认

然后清理一下浏览器缓存,重启浏览器再去测试一下看看(暴露header记得换行)

如果还是不可以,

1、您将该OSS的资源的cache-control设置为no-cache,这样即可避免该资源在客户端进行缓存,每次请求都会重新在服务器端获取鉴权信息;

2、使用CDN加速OSS,然后按照下述文档修改CDN配置CORS,这样CDN所有请求都会返回CORS头。

请您参考:https://help.aliyun.com/knowledge_detail/40183.html"

因为我也使用了阿里CDN所以还要去CDN里设置一下,又拍云和腾讯云的那个步骤。添加HTTP头设置~

阿里OSS、腾讯云COS、又拍云对象存储跨域设置-关玉江个人博客这些设置好之后,我的网站跨域总算是完成了!