使用带有 Rackspace CDN 问题的 rack-cors

Question

我有一个使用 rack-cors 的 rails 4.2 应用程序。即使我所有其他资产都很好，但我的字体很棒的图标都没有出现。我正在使用机架空间 CDN。我的 CDN 网址看起来像

http://ddf908e003b5678bc25-9d6bfcdc12345678ba868a15bca98.r12.cf5.rackcdn.com/assets/main-4f3595479ce96112e1b8ab4e5357fc26.css

我的 rack-cors 配置在我的 config/application.rb

config.middleware.insert_before 0, "Rack::Cors" do
  allow do
    origins 'localhost:3000', /^http:\/\/\w+.+rackcdn.com/
    resource '/assets/*', headers: :any, methods: :get
  end
end

图标在本地显示就好了。他们只是在生产中没有显示。关于我可能遗漏的任何想法？

编辑

我正在使用font-awesome-sass gem。当我查看页面时，我没有收到任何 javascript 错误或任何东西，只有 CORS 警告，没有图标。

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://ddf908e003b5678bc25-9d6bfcdc12345678ba868a15bca98.r12.cf5.rackcdn.com/assets/main-4f3595479ce96112e1b8ab4e5357fc26.css/assets/font-awesome/fontawesome-webfont-e9c0e802c2b0faf4d660e2bff17b5cf1.woff. This can be fixed by moving the resource to the same domain or enabling CORS.

编辑 2

我正在使用 asset_sync 来帮助设置 Ash Wilson 建议的自定义标头。

AssetSync.configure do |config|
  config.fog_provider = 'Rackspace'
  config.rackspace_username = ENV['RACKSPACE_USERNAME']
  config.rackspace_api_key = ENV['RACKSPACE_API_KEY']
  config.fog_directory = ENV['FOG_DIRECTORY']
  config.fog_region = ENV['FOG_REGION']
  config.gzip_compression = true
  config.manifest = true
  config.custom_headers = {
    "\.(ttf|otf|eot|woff|svg)$" => {
      "Access-Control-Allow-Origin" => "*",
      "Access-Control-Request-Method" => "*",
      "Access-Control-Allow-Methods" => "*"
    }
  }
end

我还没有做任何缓存，但我肯定会清除所有浏览器缓存。我还在控制面板中发现了 2 个抱怨 .woff 和 .ttf 的文件，正如 Ash 在下面提到的那样，我手动将标题添加到其中。但是，我仍然看到同样的问题。也许有一个额外的步骤，或者 AssetSync 可能只是死了并且不起作用？

编辑 3

这是卷曲的标题。看起来 CORS 标头在那里。等了一天传播，还是不行。

curl -i -s -XHEAD http://ddf908e003b5678bc25-9d6bfcdc12345678ba868a15bca98.r12.cf5.rackcdn.com/assets/font-awesome/fontawesome-webfont-e0e0f28a0197446b28f818aa81b80530.ttf

HTTP/1.1 200 OK
Content-Length: 112160
Last-Modified: Thu, 07 May 2015 16:49:12 GMT
Accept-Ranges: bytes
Access-Control-Request-Method: *
ETag: c4668ed2440df82d3fd2f8be9d31d07d
X-Timestamp: 1431017351.82062
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, HEAD, OPTIONS
Content-Type: application/font-sfnt
X-Trans-Id: tx53b90a9b638141c6874e6-00554bf992iad3
Cache-Control: public, max-age=259200
Expires: Sun, 10 May 2015 23:47:30 GMT
Date: Thu, 07 May 2015 23:47:30 GMT
Connection: keep-alive

Answer 1

要使 CORS 正常工作，您需要在 Rackspace 端的 Cloud Files 对象上设置 CORS 标头，而不是由您的应用提供的标头。您可以在control panel 中通过单击每个文件旁边的齿轮图标来执行此操作：

Cloud Files documentation 包含有关受支持的 CORS 标头及其含义的部分。

如果您有大量资产，或者有一个自动发布它们的构建流程，您将需要使用 API 或 SDK 来设置这些资产。 developer documentation 包含一个代码 sn-p，您可以采用它来执行此操作；将“Access-Control-Allow-Origin”或其他相关标题替换为“Content-Type”。

这是一个使用 Ruby SDK 的完整示例，Fog：

require 'fog'

# Authenticate
@client = Fog::Storage.new(
  :provider => 'rackspace',
  :rackspace_username => '{username}',
  :rackspace_api_key => '{apiKey}',
  :rackspace_region => '{region}'
)

# Find the file object
@directory = @client.directories.get("{container name}")
@file = @directory.get("{file name}")

# To only allow CORS requests from a page hosted at 'my-domain.com'
# You can also set this to '*' to allow CORS requests from anywhere
@file.access_control_allow_origin = "http://my-domain.com"
@file.save