CORS 问题即使有原产地政策

Posted

技术标签:

【中文标题】CORS 问题即使有原产地政策【英文标题】:CORS issue even with origin policies 【发布时间】:2017-10-05 09:48:59 【问题描述】:

我在自定义域后面的 AWS Cloudfront 上托管了一些字体。 我将此作为 s3 CORS 政策

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

关于 Cloudfront Behaviors 我有以下设置

查看器协议策略:HTTP 和 HTTPS 允许的 HTTP 方法:GET、HEAD、OPTIONS 转发标头:白名单 访问控制请求标头 访问控制请求方法 原产地

我得到的错误是

在以下位置访问字体 'https://cdn.dabster.io/assets/fonts/fontawesome-webfont.ttf?v=4.7.0' 来自原点“https://dabster.io”已被 CORS 策略阻止:否 请求中存在“Access-Control-Allow-Origin”标头 资源。因此,不允许访问 Origin 'https://dabster.io'。

您可以在https://dabster.io 和https://www.dabster.io 看到错误

curl -I -s -X GET -H "Origin: dabster.io" https://cdn.dabster.io/assets/fonts/fontawesome-webfont.ttf\?v\=4.7.0                                 

HTTP/1.1 200 OK
Content-Type: application/octet-stream
Content-Length: 165548
Connection: keep-alive
Date: Sun, 07 May 2017 09:26:57 GMT
Access-Control-Allow-Origin: dabster.io
Access-Control-Allow-Methods: GET, HEAD
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Last-Modified: Fri, 05 May 2017 14:04:16 GMT
ETag: "b06871f281fee6b241d60582ae9369b9"
Accept-Ranges: bytes
Server: AmazonS3
Vary: Origin,Access-Control-Request-Headers,Access-Control-Request-Method
X-Cache: Miss from cloudfront
Via: 1.1 d674762e43fd40650eec6e201e4316a2.cloudfront.net (CloudFront)
X-Amz-Cf-Id: JYxW4fs2Ijgt_wEnl-DQ6Yqz_qPYbwaWZSZyRjrnKQ_yje__n3skkA==

我也在响应中获取标题。 请对此有所了解

【问题讨论】:

【参考方案1】:

原始值必须包含协议部分——https://http://。所以你需要这样做:

<AllowedOrigin>https://dabster.io</AllowedOrigin>

curl 测试有效的原因是您发送的 Origin 标头没有协议部分。

但是浏览器会发送带有协议部分的Origin 标头;例如,Origin: https://dabster.io

因此,由于您当前已配置好东西,如果您包含协议,您的 curl 测试也会失败:

curl -I -s -X GET -H "Origin: https://dabster.io" \
  https://cdn.dabster.io/assets/fonts/fontawesome-webfont.ttf\?v\=4.7.0

【讨论】:

好的,让我试试看它是否有效,我会相应地更新 我已经进行了更改并使云端缓存无效,但对于 curl 它也适用于协议。 如果您更改了&lt;AllowedOrigin&gt;https://dabster.io&lt;/AllowedOrigin&gt; 配置,那么如果您指定协议,则预计 curl 测试现在可以工作。但是您的浏览器开发工具控制台中是否仍然出现“没有 'Access-Control-Allow-Origin' 标头存在”错误?还是您的网络应用程序现在能够按预期获取字体?

以上是关于CORS 问题即使有原产地政策的主要内容,如果未能解决你的问题,请参考以下文章

Firebase 函数的 CORS 政策问题

CORS 政策问题刚刚开始,没有代码更改 - “CORS 政策:'Access-Control-Allow-Origin' 标头包含多个值”

Chrome Websockets CORS 政策

CORS 开发政策阻止的所有请求

为啥我收到 Cors 错误:...已被 CORS 政策阻止

Cors 政策角度