我正在尝试从AWS S3在heroku上的django项目中托管webfonts(特别是fontawesome)并将其提供给我的django项目，但是我很难克服可怕的firefox cross-domain font-loading issue。我已经尝试了所有已记录并接受的解决方案，但没有一个对我有用。
我一直看到的推荐解决方案是在S3存储桶上编辑CORS配置:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>https://myapp.herokuapp.com</AllowedOrigin>
<AllowedOrigin>https://www.myapp.herokuapp.com</AllowedOrigin>
<AllowedOrigin>https://myapp.com</AllowedOrigin>
<AllowedOrigin>https://www.myapp.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>
我尝试了这些设置的不同变体，并且Firefox仍然为我提供了https://www.myapp.com禁止的HTTP 403:
Request URL: https://my_bucket.s3.amazonaws.com/css/fontawesome-webfont-webfont.ttf
Request Method: GET
Status Code: HTTP/1.1 403 Forbidden
通过该HTTP请求，我在响应头中获得了“Access-Control-Allow-Credentials:true”。
我需要声明另一个CORS规则以使Firefox接受S3的字体吗？当我 curl Font Awesome 时，我看不到/看到有助于解决此问题的任何信息:
> https://s3.amazonaws.com/my_bucket/font/fontawesome-webfont.eot
* About to connect() to s3.amazonaws.com port 443 (#0)
* Trying xxx.xx.xx.xxxx... connected
* Connected to s3.amazonaws.com (xxx.xx.xx.xxx) port 443 (#0)
* SSLv3, TLS handshake, Client hello (1):
* SSLv3, TLS handshake, Server hello (2):
* SSLv3, TLS handshake, CERT (11):
* SSLv3, TLS handshake, Server finished (14):
* SSLv3, TLS handshake, Client key exchange (16):
* SSLv3, TLS change cipher, Client hello (1):
* SSLv3, TLS handshake, Finished (20):
* SSLv3, TLS change cipher, Client hello (1):
* SSLv3, TLS handshake, Finished (20):
* SSL connection using DES-CBC3-SHA
* Server certificate:
* subject: C=US; ST=Washington; L=Seattle; O=Amazon.com Inc.; CN=s3.amazonaws.com
* start date: 2010-10-08 00:00:00 GMT
* expire date: 2013-10-07 23:59:59 GMT
* common name: s3.amazonaws.com (matched)
* issuer: C=US; O=VeriSign, Inc.; OU=VeriSign Trust Network; OU=Terms of use at https://www.verisign.com/rpa (c)09; CN=VeriSign Class 3 Secure Server CA - G2
* SSL certificate verify ok.
> GET /my_bucket/font/fontawesome-webfont.eot HTTP/1.1
> User-Agent: curl/7.21.4 (universal-apple-darwin11.0) libcurl/7.21.4 OpenSSL/0.9.8r zlib/1.2.5
> Host: s3.amazonaws.com
> Accept: */*
> Origin: https://www.myapp.com
>
< HTTP/1.1 200 OK
< x-amz-id-2: XxMCWhqMsTGMMmAQnSHT/+RO7aluQSRyZ5wTAseMKM5cpavE+NkBQCuD8ykiIIDE
< x-amz-request-id: 90FF2C1C85254815
< Date: Mon, 22 Jul 2013 01:54:53 GMT
< Access-Control-Allow-Origin: https://www.myapp.com
< Access-Control-Allow-Methods: GET
< Access-Control-Max-Age: 3000
< Access-Control-Allow-Credentials: true
< Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
< Last-Modified: Mon, 22 Jul 2013 01:44:31 GMT
< ETag: "455808250694e5760bd92b3ce1f070b6"
< Accept-Ranges: bytes
< Content-Type: application/octet-stream
< Content-Length: 25395
< Server: AmazonS3
<
3cOb?LP&?S~FontAwesomeRegular"Version 1.00 2012&FontAwesome RegularBSGPɴbGbKV?????Y?D
还有另一种设置Access-Control-Allow-Origin的方法可以使此工作正常吗？
最佳答案
如果您要在存储桶策略中限制对特定HTTP引用服务器的访问，请在引用器列表中也添加存储桶URL。例如:
"Condition": {
"StringLike": {
"aws:Referer": [
"http://my_bucket.s3.amazonaws.com/*",
"https://my_bucket.s3.amazonaws.com/*",
"http://www.example.com/*",
"https://www.example.com/*",
]
}
}
检查Firefox中的响应 header 。原来，字体的引荐来源是您的CSS文件，该文件托管在s3存储桶中，而不是您的域中。
关于django - 尽管有S3 CORS规则，但Firefox WebFont 403，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17779246/