Chrome indiquant "Aucun en-tête Access-Control-Allow-Origin trouvé" Mais curl affiche 'Access-Control-Allow-Origin' en utilisant cloudfront pour les polices

Question

Auparavant, j'utilisais heroku pour mettre à jour les ressources statiques du serveur. Ensuite, j'ai décidé d'utiliser Cloud Front pour servir les actifs statiques pour mon application rails (5.0.2) sur heroku. Après la configuration, tout semblait bien, mais pour les polices de chrome, cette erreur était générée.

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. 

Je googlé la question et trouvé quelques informations ici « Cloudfront CORS issue serving fonts on Rails application ». Selon la première réponse, j'ai suivi toutes les étapes. Ma configuration rock-est 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 

qui est là dans application.rb Je reçois encore cette question

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. 

Utiliser curl pour rechercher des en-têtes, je suis arrivé ceci met quand frapper mon url

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 

Lorsque vous frappez direclty à cdn url

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== 

Clairement les en-têtes sont présents alors pourquoi le chrome lance cette erreur. Aide aimablement.

Answer 1

Vous devez ajouter à votre en-têtes prévol 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