HoneyMoose
  • 首页
  • Java
  • Jersey
  • Jira
  • Confluence
  • U.S.
    • USRealEstate
    • U.S. Travel
    • H1B
  • 项目和网站
    • CWIKI.US
    • OSSEZ 社区
    • WIKI.OSSEZ.COM
    • BUG.OSSEZ.COM
    • RSS.OSSEZ.COM
BLOG.OSSEZ.COM
A responsive blog theme focused om user reading experience
  1. Home
  2. Computer Science
  3. This article

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

2020年04月20日 960Browse 0Like 0Comments

在研究 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 的配置问题。

如何解决问题?


 

是否有跨域访问问题。

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

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

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

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

CloudFront

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

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

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

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

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

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

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

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

并进行下面的配置:

S3

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

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

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>


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

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

Tags: None
Last updated:2020年04月20日

Kratos

stay absorbed stay excellent

Like
< Previous
Next >

Comments

Cancel reply

Newest Hotspots Random
Newest Hotspots Random
网络编程常用的几种字符编码 Java 中的 String Pool 简介 有关 Java 9 的 String Java String 性能和优化 Java String 手工引用指针 Java String 文字(Literal)和 对象(Object)初始化
Jenkins 通过检查代码提交自动触发编译IntelliJ IDEA 2022 年版本中的作者提示Discourse 新用户可插入媒体的数量Discourse 的信任级别Java 使用 char[] Array 还是 String 存储字符串密码Java 字符串引用(String Interning)
安装 Spring Boot CLI Five Ways to Get Some Culture on Your Next Cruise Confluence 启动异常提示集群错误 Jersey 2.x 分支 Java SE 兼容性 Kirkland 保健品 海淘一般在哪个网站买 为什么每次电脑一出问题,了解电脑基础知识的人通常都会回答“重启一下试试”
Categories
  • Akka
  • Algorithm(算法)
  • AMQP
  • Angular
  • CI
  • Compile And CI
  • Computer Science
  • Confluence
  • DataBase
  • Gradle
  • H1B
  • Hibernate
  • IDE
  • Java
  • Jersey
  • Jira
  • MariaDB
  • PrestaShop
  • Spring
  • Spring Batch
  • U.S.
  • U.S. Travel
  • USRealEstate
  • 我的小厨

COPYRIGHT © 2020 HoneyMoose. ALL RIGHTS RESERVED.

THEME CWIKIUS.CN MADE BY VTROIS