请求的资源上没有“Access-Control-Allow-Origin”标头？

Posted 2023-03-03

技术标签:

【中文标题】请求的资源上没有“Access-Control-Allow-Origin”标头？【英文标题】：No 'Access-Control-Allow-Origin' header is present on the requested resource? 【发布时间】：2017-02-07 07:39:33 【问题描述】：

我的引导字形图标在其他浏览器上显示，但我在 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>

参考文献

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

【问题讨论】：

【参考方案1】：

我已经正确配置了一切：

# 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://client.playcocola.com”访问“https://playcocola.com/api/”处的 XMLHttpRequest 已被 CORS 策略阻止：没有“Access-Control-Allow-Origin”标头存在于请求的资源上。

这是随机发生的，仅在生产中，仅在某些请求中，不是全部。

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

# nginx.conf
http 
  [...]

  client_max_body_size 50M;

【讨论】：

【参考方案2】：

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

在您的情况下，我敢打赌，来自您浏览器的资产请求正在通过 OPTIONS 请求“预检”，但 CDN 传递了请求没有访问控制请求标头。因此，CDN（正确地）没有从您的 Rails 应用程序接收到 CORS 响应标头，因此浏览器甚至不会尝试 GET 请求，并且会因跨域错误而失败。

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

【讨论】：

【参考方案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

【讨论】：

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