请求的资源上没有'Access-Control-Allow-Origin'标头?

4 人关注

我的bootstrap glyphicons在其他浏览器上显示,但我在google chrome上得到这个错误。

源自 'http://d37p52igaahgm9.cloudfront.net'的 字体已被 被跨源资源共享政策阻止加载。没有 所请求的资源上存在 "访问控制-允许-起源 "头。 资源。因此,原产地 'http://www.anthonygalli.com' 不 允许访问。

尽管尝试过,但错误仍然存在。

application_controller.rb

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

application.rb

config.middleware.insert_before 0, "Rack::Cors" do
  allow do
    origins '*'
    resource '*', :headers => :any, :methods => [:get, :post, :options]
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>
  • 亚马逊S3 CORS(跨源资源共享)和火狐跨域字体加载
  • 来自原产地的字体被跨原产地资源共享政策阻止了加载。
  • ruby-on-rails
    google-chrome
    amazon-s3
    cors
    amazon-cloudfront
    AnthonyGalli.com
    AnthonyGalli.com
    发布于 2016-09-29
    3 个回答
    eprothro
    eprothro
    发布于 2021-10-01
    已采纳
    0 人赞同

    你不需要(不应该)在每个响应中生成头文件。

    在你的案例中,我敢打赌,来自你的浏览器的资产请求被 "预检 "为一个OPTIONS请求,但CDN在传递请求时 没有传递Access-Control请求标头 。因此,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]
    
    Naveen Valluri
    Naveen Valluri
    发布于 2021-10-01
    0 人赞同

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

     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'
    
    如果在 所有 请求上设置这些头信息,这基本上是完全禁用 CORS 保护,这不是一个好主意,因为 CORS 的存在是为了保护你的用户不被第三方代表他们触发请求。这个答案应该包括关于如何将其限制在资产请求上的信息,或者说明将这个过滤器应用于应用程序中的每个请求是危险的。
    fguillen
    fguillen
    发布于 2021-10-01
    0 人赞同

    我把一切都配置好了。

    # 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]
    

    但我仍然出现了错误。

    从原点'https://client.playcocola.com'访问XMLHttpRequest在'https://playcocola.com/api/'已被CORS策略阻止。被请求的资源上没有'访问控制-允许-起源'头。

    它是随机发生的,只在生产中发生,而且只在一些请求中发生,不是所有的请求。

    问题是与上传文件的大小和我在生产中的nginx配置有关。解决方案在这里。CORS错误上传文件~4mb

    # nginx.conf
    http {