请求的资源上没有'Access-Control-Allow-Origin'头部？

Question

我的bootstrap图标在其他浏览器中能够显示，但是在谷歌浏览器中出现了以下错误：

字体来源于'http://d37p52igaahgm9.cloudfront.net'，由于跨域资源共享策略拦截，未在请求资源上找到'Access-Control-Allow-Origin'标头，因此来自'http://www.anthonygalli.com'的源无法访问。

尝试了以下方法仍无法解决问题：

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（跨源资源共享）和Firefox跨域字体加载
• 跨源资源共享策略已阻止来自原始来源的字体加载

- AnthonyGalli.com

Answer 1

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

在您的情况下，我敢打赌，来自浏览器的资源请求正在通过OPTIONS请求进行“预检”，但CDN将请求传递没有访问控制请求标头。 因此，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

- eprothro

Answer 2

我已经正确地配置了所有内容：

# 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

我仍然遇到了这个错误：

访问'https://playcocola.com/api/'被CORS策略阻止，因为请求的资源上没有'Access-Control-Allow-Origin'头。这个问题是随机发生的，只在生产环境中的某些请求中出现，而不是所有请求。

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

# nginx.conf
http {
  [...]

  client_max_body_size 50M;
}

- fguillen

Answer 3

尝试在应用程序控制器中添加方法和头文件。这对我有用。

    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

- Naveen Valluri

---

如果在所有请求上设置这些标头，实际上会完全禁用CORS保护，这并不是一个好主意，因为CORS的存在是为了保护您的用户免受第三方代表他们触发请求的攻击。这个答案应该包括关于如何将此限制仅适用于资产请求的信息，或者注明将此过滤器应用于应用程序中的每个请求都是危险的。 - jbielick