请求的资源上是否存在“Access-Control-Allow-Origin”标头?

时间:2016-09-29 06:01:10

标签: ruby-on-rails google-chrome amazon-s3 cors amazon-cloudfront

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

  

来自“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>

参考

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

您不需要(不应该)在每个响应中生成标头。

在您的情况下,我会打赌您的浏览器的资产请求被“预检”与OPTIONS请求,但CDN传递请求没有访问控制请求标题。因此,CDN(正确地)不会从您的Rails应用程序接收CORS响应头,因此浏览器甚至不会尝试GET请求,并且会因Cross-Origin错误而失败。

  

“预检”请求首先通过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