请求的资源上不存在 'Access-Control-Allow-Origin' header？

Question

我的 bootstrap 字形显示在其他浏览器上，但我在 google 上收到此错误 chrome:

Font from origin 'http://d37p52igaahgm9.cloudfront.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.anthonygalli.com' is therefore not allowed access.

尝试后错误仍然存在：

application_controller.rb

before_action :set_cors

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

application.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) and Firefox cross-domain font loading
Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy

Answer 1

尝试在应用程序控制器中添加方法和headers。它对我有用。

    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

您不需要（不应该）在每个响应中生成 headers。

在你的情况下，我敢打赌来自你浏览器的资产请求是 "preflighted" OPTIONS 请求，但 CDN 传递请求 而没有 Access-Control 请求 headers。因此，CDN（正确地）没有从您的 Rails 应用程序接收到任何 CORS 响应 headers，因此浏览器甚至不会尝试 GET 请求，并因 Cross-Origin 错误而失败。

"preflighted" requests first send an HTTP request by the OPTIONS method to the resource on the other domain, in order to determine whether the actual request is safe to send

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

您的 CDN 需要设置为将正确的请求 headers 转发到您的应用服务器，以便它知道生成 CORS headers。然后，CDN 会将这些 CORS 响应 headers 传递给浏览器。

When you want OPTIONS responses to be cached, configure CloudFront to forward the following headers: Origin, Access-Control-Request-Headers, and Access-Control-Request-Method.

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

如果您为那些 headers 更改 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

Answer 3

我已正确配置所有内容：

# config/initializers/cors.rb
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "*"

    resource "*",
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

我仍然遇到错误：

Access to XMLHttpRequest at 'https://playcocola.com/api/' from origin 'https://client.playcocola.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

它是随机发生的，只在生产中和一些请求中发生，不是全部。

问题与上传文件的大小和我在生产环境中的 nginx 配置有关。解决方案在这里：CORS error upload file ~4mb

# nginx.conf
http {
  [...]

  client_max_body_size 50M;
}

请求的资源上不存在 'Access-Control-Allow-Origin' header？

No 'Access-Control-Allow-Origin' header is present on the requested resource?

ruby-on-rails

google-chrome

amazon-s3

cors

amazon-cloudfront