在研究 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 分配转发标头,请执行以下步骤: 从 CloudFront 控制台打开分配。 选择行为选项卡。 选择创建行为,或者选择现有行为,然后选择编辑。 在基于所选的请求标头进行缓存中,选择白名单。 在将标头列入白名单下,从左侧菜单中选择标头,然后选择添加。 选择是,编辑。 注意:另外,请务必将标头作为请求的一部分转发到源。 CloudFront 分配的缓存行为允许 OPTIONS 请求 如果更新 CORS 策略并将相应的标头列入白名单后仍显示错误,请尝试在分配的缓存行为中允许 OPTIONS HTTP 方法。默认情况下,CloudFront 只允许 GET 和 HEAD 方法,但某些 Web 浏览器可能会发出 OPTIONS 方法的请求。 要在 CloudFront 分配中启用 OPTIONS 方法,请执行以下步骤: 从 CloudFront 控制台打开分配。 选择行为选项卡。 选择创建行为,或者选择现有行为,然后选择编辑。 对于允许的 HTTP 方法,选择 GET、HEAD、OPTIONS。 选择是,编辑。 并进行下面的配置: 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