請求的資源上不存在“Access-Control-Allow-Origin”標頭？

Question

我的引導程序字形顯示在其他瀏覽器上，但我在 google chrome 上收到此錯誤：

來自源“ http://d37p52igaahgm9.cloudfront.net ”的字體已被跨源資源共享策略阻止加載：請求的資源上不存在“Access-Control-Allow-Origin”標頭。 Origin ' http://www.anthonygalli.com ' 因此不允許訪問。

盡管嘗試過，但錯誤仍然存​​在：

應用控制器.rb

before_action :set_cors

def set_cors
  headers['Access-Control-Allow-Origin'] = '*'
  headers['Access-Control-Request-Method'] = '*'
end

應用程序.rb

config.middleware.insert_before 0, "Rack::Cors" do
  allow do
    origins '*'
    resource '*', :headers => :any, :methods => [:get, :post, :options]
  end
end

config.action_dispatch.default_headers = {
    'Access-Control-Allow-Origin' => '*',
    'Access-Control-Request-Method' => '*'
}

CORS 配置編輯器

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

參考

• Amazon S3 CORS (Cross-Origin Resource Sharing) 和 Firefox 跨域字體加載
• 來自源的字體已被跨源資源共享策略阻止加載

Answer 1

嘗試在應用程序控制器中添加方法和標題。 它對我有用。

    def cors_set_access_control_headers
        headers['Access-Control-Allow-Origin'] = '*'
        headers['Access-Control-Allow-Methods'] = 'POST, PUT, DELETE, GET, PATCH, OPTIONS'
        headers['Access-Control-Request-Method'] = '*'
        headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept, Authorization'
    end

Answer 2

您不需要（不應該）在每個響應中生成標頭。

在您的情況下，我敢打賭來自您的瀏覽器的資產請求正在使用 OPTIONS 請求進行“預檢”，但 CDN 傳遞的請求沒有 Access-Control request headers 。 CDN 因此（正確地）沒有從您的 Rails 應用程序接收到 CORS 響應標頭，因此瀏覽器甚至不會嘗試 GET 請求，並因跨域錯誤而失敗。

“預檢”請求首先通過 OPTIONS 方法向其他域上的資源發送 HTTP 請求，以確定實際請求是否可以安全發送

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests

您的 CDN 需要設置為將正確的請求標頭轉發到您的應用服務器，以便它知道生成 CORS 標頭。 然后，CDN 會將這些 CORS 響應標頭傳遞給瀏覽器。

如果您希望緩存 OPTIONS 響應，請將 CloudFront 配置為轉發以下標頭：Origin、Access-Control-Request-Headers 和 Access-Control-Request-Method。

http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html#header-caching-web-cors

如果您對這些標頭的 CDN 進行更改，然后使您的資產無效，那么您的rack-cors配置本身應該可以正常工作。

# config/initializers/cors.rb

# @note: must be run after initializers/_assets.rb
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'

    # All asset requests should be to rails prefixed assets paths
    # serverd from the asset pipeline (e.g.: "/assets/*" by default)
    resource "#{Rails.application.config.assets.prefix}/*",
      # Allow any request headers to be sent in the asset request
      # https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Headers
      headers: :any,
      # All asset fetches should be via GET
      # Support OPTIONS for pre-flight requests
      # https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests
      methods: [:get, :options]
  end
end