如何设置对象存储OSS跨域(CORS)?

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,内容安全 1000 次 1年
对象存储 OSS,恶意文件检测 1000次 1年
简介: CORS的中文名是跨域资源共享,是HTML5提供的标准跨域解决方案。跨域访问,也叫JavaScript跨域访问问题,是浏览器出于安全考虑而设置的一个限制,即同源策略。当来自于A网站的页面中的JavaScript代码希望访问B网站的时候,浏览器会拒绝该访问,因为A、B两个网站是属于不同的域。

CORS的中文名是跨域资源共享,是HTML5提供的标准跨域解决方案。跨域访问,也叫JavaScript跨域访问问题,是浏览器出于安全考虑而设置的一个限制,即同源策略。当来自于A网站的页面中的JavaScript代码希望访问B网站的时候,浏览器会拒绝该访问,因为A、B两个网站是属于不同的域。此处跨域大家可以先简单理解为A、B两个网站域名不同而存在跨域问题。

CORS的主要使用场景:CORS的使用一定是在浏览器情况下,因为控制访问权的是浏览器而非服务器。因此使用其它客户端的时候无需关心任何跨域问题。下面我们通过实例给大家演示一下跨域。

之前我们已经在服务器上搭建外部环境,并创建网站绑定了这个域名“test1.pier39.cn”后面的/get_object_from_OSS.html是我们在空间中上传了一个测试文件。在浏览器中访问这个地址。打开浏览器后先点击一下F12调出浏览器调试工具,然后粘贴一下访问地址,点击访问。

我们先来看一下程序的源代码。

image

这个程序就是通过GET的方法调取这个OSS bucket下的a.jpg图片。

image

点击一下GET,可以看到,在获取了a.jpg这个图片的时候,显示的状态码是403,获取不到了。

image

image

浏览器默认是拒绝这种跨域行为的,所以这个图片现在获取不到。针对此跨域问题OSS中有一个CORS的设置可以解决此问题。

下面我们在控制台中设置一下CORS后再访问看一下。

登录控制台,并进入bucket,找一个bucket之后点击bucket属性,右侧可以看到这个Cors设置。

image

点击Cors设置→添加规则。

image

image

来源这里需要填网站访问的域名;Method的选择的是GET;Alowed Header填写*,这样设置就可以了。点击确定。

现在Cors规则已添加,这时我们再来访问一下之前的这个站点,点击GET。

image

可以看到,此时这个a.jpg图片就可以获取到了,状态码已经是正常的200了。看一下它的Headers。

image

可以看到此时这个是允许被获取的,是由于我们已经在OSS台控制设置里面把http://test1.pier39.cn这个域名加上了。方法这里由于我们只写了GET,所以就是GET。此时通过OSS控制台Cors的设置里面,我们就可以解决这种跨域的问题。

我们现在就设置时看见的五个参数做一个解释:

来源:配置的时候是要带上完整的域信息,比如示例中就是http://test1.pier39.cn,注意不要遗漏了协议头(如http),如果端口号不是默认的,还要带上端口号(后面加上:端口号)。如果您不能确定,可以使用通配符*,通配符*代表所有来源都可以。

Method:按需求开通对应的方法即可。我们示例中只用了一个GET的方法,也可以全部都勾选,或者根据你的实际情况选择方式。

Allow Header:允许通过的Header列表,因为这里比较容易遗漏Header,因此建议在没有特殊要求的情况下设置为*。此处大小写不敏感。

Expose Header:暴露给浏览器的Header列表,一般来说都不应该暴露这些信息,这里可以不填。如果有特殊需求可以单独指定,此处的大小写也是不敏感的。

缓存时间:如果没有特殊情况,可以酌情设置的大一点,比如60s。

Expose Header和缓存时间也可以不填,我们在测试的时候就没有填写,最终也是可以的。大家可以根据自己实际情况来判断是否要填写。

以上就是Cors设置的全部内容。

更多信息查看:对象存储 OSS > 设置跨域资源共享

相关实践学习
通义万相文本绘图与人像美化
本解决方案展示了如何利用自研的通义万相AIGC技术在Web服务中实现先进的图像生成。
相关文章
|
5月前
|
人工智能 前端开发 JavaScript
webpack-dev-server代理后端一直报CORS跨域或500错误
在Vue项目中使用Webpack的devServer代理后端接口时,遇到500错误。问题根源在于浏览器请求中携带的Origin头导致服务器报错,而Postman测试正常。通过分析发现,调整或移除Origin头可解决问题。解决办法包括:1) 在代理配置中添加正确的Origin头;2) 删除请求中的Origin头。文章还深入解析了Origin头的作用及changeOrigin配置的实际意义,并附带相关文档链接,帮助开发者更好地理解与解决类似跨域问题。
310 12
|
7月前
|
前端开发 JavaScript 应用服务中间件
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
跨域问题是前端开发中常见且棘手的问题,但通过理解CORS的工作原理并应用合适的解决方案,如服务器设置CORS头、使用JSONP、代理服务器、Nginx配置和浏览器插件,可以有效地解决这些问题。选择合适的方法可以确保应用的安全性和稳定性,并提升用户体验。
4372 90
|
7月前
|
JSON 缓存 前端开发
对CORS(跨域)的一些见解
CORS(跨域资源共享)是W3C标准,用于解决AJAX跨源请求限制。浏览器与服务器需共同支持CORS,浏览器自动处理请求头,开发者无需额外操作。CORS分为简单请求与非简单请求:简单请求满足特定条件(如方法为GET/POST/HEAD且头信息有限制),浏览器直接发送;非简单请求需先进行“预检”请求(OPTIONS方法),确认服务器允许后才发送实际请求。服务器回应需包含Access-Control-Allow-Origin等字段,以控制跨域访问权限。
189 10
|
11月前
|
开发框架 中间件 Java
如何处理跨域资源共享(CORS)的 OPTIONS 请求?
处理 CORS 的 OPTIONS 请求的关键是正确设置响应头,以告知浏览器是否允许跨域请求以及允许的具体条件。根据所使用的服务器端技术和框架,可以选择相应的方法来实现对 OPTIONS 请求的处理,从而确保跨域资源共享的正常进行。
563 61
|
12月前
|
JSON 前端开发 安全
CORS 是什么?它是如何解决跨域问题的?
【10月更文挑战第20天】CORS 是一种通过服务器端配置和浏览器端协商来解决跨域问题的机制。它为跨域资源共享提供了一种规范和有效的方法,使得前端开发人员能够更加方便地进行跨域数据交互。
|
10月前
|
安全 Java 应用服务中间件
SpringBoot:CORS是什么?SpringBoot如何解决跨域问题?
CORS是Web开发中常见且重要的机制,SpringBoot通过提供注解、全局配置和过滤器等多种方式来解决跨域问题。选择适合的方式可以帮助开发者轻松处理跨域请求,提高应用的灵活性和安全性。
568 2
|
11月前
|
安全
CORS 跨域资源共享的实现原理是什么?
CORS 跨域资源共享的实现原理是什么?
|
11月前
|
JavaScript 前端开发 API
跨域资源共享(CORS)的工作原理是什么?
跨域资源共享(CORS)通过浏览器和服务器之间的这种交互机制,在保证安全性的前提下,实现了跨域资源的访问,使得不同源的网页能够合法地获取和共享服务器端的资源,为现代Web应用的开发提供了更大的灵活性和扩展性。
|
12月前
|
缓存 前端开发 应用服务中间件
CORS跨域+Nginx配置、Apache配置
CORS跨域+Nginx配置、Apache配置
566 7
|
11月前
|
安全
CORS 跨域资源共享的实现原理
CORS 跨域资源共享的实现原理
206 0

热门文章

最新文章