鉻說「找到沒有訪問控制允許源標頭」但curl顯示'訪問控制允許源頭'，同時使用雲字體字體

早些時候我使用heroku來服務靜態資產。然後我決定使用雲鋒爲我的rails（5.0.2）應用程序在heroku上提供靜態資產。配置後，它似乎很好，但對於字體鉻是拋出這個錯誤。鉻說「找到沒有訪問控制允許源標頭」但curl顯示'訪問控制允許源頭'，同時使用雲字體字體

Access to Font at 'https://eeeeeee.cloudfront.net/assets/fontawesome-webfont-18e6b5ff511b90edf098e62ac45ed9d6673a3eee10165d0de4164d4d02a3a77f.woff?v=3.2.1' from origin 'https://staging-example.herokuapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://staging-example.herokuapp.com' is therefore not allowed access.

我搜索了這個問題，並在這裏找到了一些信息'Cloudfront CORS issue serving fonts on Rails application'。根據第一個答案，我遵循了所有步驟。我的搖滾-CORS配置

config.middleware.insert_before 0, Rack::Cors do 
    allow do 
    origins %w[ 
      https://staging-example.herokuapp.com 
      http://staging-example.herokuapp.com 
      ] 
    resource '/assets/*' 
    end 
end

這是在有application.rb中不過我得到這個問題

Access to Font at 'https://eeeeeee.cloudfront.net/assets/fontawesome-webfont-18e6b5ff511b90edf098e62ac45ed9d6673a3eee10165d0de4164d4d02a3a77f.woff?v=3.2.1' from origin 'https://staging-example.herokuapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://staging-example.herokuapp.com' is therefore not allowed access.

使用curl找頭撞擊着我的網址時，我得到了這一點，看跌期權

curl -H "Origin: https://staging-example.herokuapp.com" -I https://staging-example.herokuapp.com/assets/fontawesome-webfont-18e6b5ff511b90edf098e62ac45ed9d6673a3eee10165d0de4164d4d02a3a77f.woff?v=3.2.1 
HTTP/1.1 200 OK 
Server: Cowboy 
Date: Sat, 17 Jun 2017 13:49:11 GMT 
Connection: keep-alive 
Access-Control-Allow-Origin: https://staging-example.herokuapp.com 
Access-Control-Allow-Methods: GET 
Access-Control-Max-Age: 1728000 
Access-Control-Allow-Credentials: true 
Last-Modified: Tue, 02 May 2017 11:13:21 GMT 
Content-Type: application/font-woff 
Vary: Origin 
Content-Length: 43572 
Via: 1.1 vegur

當照片直接打擊到CDN網址

curl -H "Origin: https://staging-example.herokuapp.com" -I https://eeeeeee.cloudfront.net/assets/fontawesome-webfont-18e6b5ff511b90edf098e62ac45ed9d6673a3eee10165d0de4164d4d02a3a77f.woff?v=3.2.1 
HTTP/1.1 200 OK 
Content-Type: application/font-woff 
Content-Length: 43572 
Connection: keep-alive 
Server: Cowboy 
Date: Sat, 17 Jun 2017 13:19:04 GMT 
Access-Control-Allow-Origin: https://staging-example.herokuapp.com 
Access-Control-Allow-Methods: GET, POST, OPTIONS 
Access-Control-Max-Age: 1728000 
Access-Control-Allow-Credentials: true 
Last-Modified: Tue, 02 May 2017 11:13:21 GMT 
Via: 1.1 vegur, 1.1 21e1fe3458bce196f8eb1701ebbbce53.cloudfront.net (CloudFront) 
Vary: Origin 
Age: 2023 
X-Cache: Hit from cloudfront 
X-Amz-Cf-Id: zFXm3g53TJ4Nm6a9oH0yjVq-KUvvPoQI1chz_XN8nnaEd-p-TtQPNg==

很明顯，這些標題是存在的，那麼爲什麼chrome會拋出這個錯誤。請幫助。

來源

2017-06-17 Satyendra Tiwari

你一定不能有捲曲測試和假設的Chrome得到了同樣的答覆。使用Chrome提出請求，捕獲響應標題，並查看您製作的觀察結果。請注意，特別是來自curl和Chrome的多個請求中'Age：'，'Last-Modified：'和'X-Cache：'的差異。 –

您需要預檢頭添加到您的application_controller.rb ：

before_action :cors_set_access_control_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

來源

2017-12-06 16:00:48

鉻說「找到沒有訪問控制允許源標頭」但curl顯示'訪問控制允許源頭'，同時使用雲字體字體

回答

相關問題