AWS CloudFront CDN + S3 CORS 跨域访问的问题

简介:

在研究 https://observablehq.com/ 的载入数据的时候,我们会发现如果你数据存在 S3 上使用 CloudFront 作为 CDN 的时候,你会发现数据库载入不进去。

提示错误:data6 = TypeError: Failed to fetch

实际上 F12 后,你会发现错误信息为:

Access to fetch at 'https://cdn.ossez.com/json/covid19/covid19-current.json' from origin 'https://dakoop.static.observableusercontent.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

这个是提示跨域错误,显然这格式 AWS 的配置问题。

如何解决问题?

aws_cors_01

是否有跨域访问问题。

你可以在 cmd 中运行下面的命令进行确认:

curl -H "origin: example.com" -v "https://cdn.ossez.com/json/covid19/covid19-current.json"

如果没有返回需要的数据,那么说明你的 AWS 设置了跨域访问限制:
aws_cors_02

因为上面的限制,你需要调整 CloudFront 和 S3。

CloudFront

找到你的分发,然后找到你的要的 Behaviors,然后选择后进行编辑。
aws_cors_03

要从您的 CloudFront 分配转发标头,请执行以下步骤:

从 CloudFront 控制台打开分配。
选择行为选项卡。
选择创建行为,或者选择现有行为,然后选择编辑。
在基于所选的请求标头进行缓存中,选择白名单。
在将标头列入白名单下,从左侧菜单中选择标头,然后选择添加。
选择是,编辑。

注意:另外,请务必将标头作为请求的一部分转发到源。

CloudFront 分配的缓存行为允许 OPTIONS 请求

如果更新 CORS 策略并将相应的标头列入白名单后仍显示错误,请尝试在分配的缓存行为中允许 OPTIONS HTTP 方法。默认情况下,CloudFront 只允许 GET 和 HEAD 方法,但某些 Web 浏览器可能会发出 OPTIONS 方法的请求。

要在 CloudFront 分配中启用 OPTIONS 方法,请执行以下步骤:

从 CloudFront 控制台打开分配。
选择行为选项卡。
选择创建行为,或者选择现有行为,然后选择编辑。
对于允许的 HTTP 方法,选择 GET、HEAD、OPTIONS。
选择是,编辑。

并进行下面的配置:
aws_cors_04

S3

针对 S3 你需要针对使用的 Bucket 设置 CORS 配置。

下面的配置,表示是针对所有的域名运行进行访问。

<?xml version="1.0" encoding="UTF-8"?>

<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>


保存后就可以进行测试了。

CloudFlare

如果你还使用了 CloudFlare 为缓存或者 CDN 或者 DNS 的话,你需要 Purge 所有页面。

要不然还是可能因为 CloudFlare 的缓存而访问不了。

测试方法

因为很多公司都会使用多重缓存的方式对内容进行处理。

这里我们需要依次确定 S3 的 CORS 已经设置好了,然后确定 CloudFront 的 CORS 已经设置好。

可以先在 S3 中设置某一个文件为 Public 然后运行命令:

curl -H "origin: example.com" -v "https://s3.us-east-2.amazonaws.com/com.ossez/json/covid19/covid19-current.json"

上面的命令是从 S3 中拉取数据,如果能够返回数据则表明 S3 的 CORS 没有问题。

当 S3 没有问题的时候,可以开始确定 CloudFront 的配置没有问题。

运行命令:

curl -H "origin: example.com" -v "d2t9w2kkwoel2v.cloudfront.net/json/covid19/covid19-current.json"

确定能够返回正常的数据。

如果能访问数据则说明 CloudFront CORS 没有问题。

在 DNS 中,你可能设置了 CNAME,但是你可能通过域名访问不了,那有可能是你 DNS 的缓存的问题。

你需要找到 DNS 配置后重新刷新 DNS 的页面缓存和heard 缓存。

例如,我们使用 CloudFlare 的 DNS 的 Purge 所有页面。

然后进行测试:

curl -H "origin: example.com" -v "https://cdn.ossez.com/json/covid19/covid19-current.json"

如果能够返回正确的数据,则说明所有的配置已经完成了。

https://www.cwiki.us/display/SpringBootZH/questions/57939099

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