1

Earlier I was using heroku to server static assets. Then I decided to use cloud front to serve static assets for my rails(5.0.2) app on heroku. After configuring it all seemed good but for fonts chrome was throwing this error .

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.

I googled the issue and found some info here 'Cloudfront CORS issue serving fonts on Rails application'. As per the first answer I followed all the steps. My rock-cors configuration is

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

which is there in application.rb Still I am getting this issue

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.

Using curl to look for headers I got this out puts when hitting my 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

When hitting direclty to 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==

Clearly the headers are present then why chrome is throwing that error. Kindly help.

Satyendra Tiwari
  • 71
  • 4
  • 2
    You can't necessarily test with curl and assume that Chrome got the same response. Make requests with Chrome, capture the response headers, and see what observations you make. Note, particularly, differences in `Age:`, `Last-Modified:`, and `X-Cache:` across multiple requests from both curl and Chrome. – Michael - sqlbot Jun 17 '17 at 17:27
  • Did you find an answer to your problem? – Marklar Jul 23 '18 at 09:29

1 Answers1

0

You need to add preflight headers to your 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
alexey_the_cat
  • 1,812
  • 19
  • 33