6

My bootstrap glyphicons show on other browsers, but I get this error on google chrome:

Font from origin 'http://d37p52igaahgm9.cloudfront.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.anthonygalli.com' is therefore not allowed access.

The error persists despite trying:

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 Configuration Editor

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

REFERENCES

Improve this question

3 Answers 3

Reset to default
3

I had everything properly configured:

# 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

And still I was having the error:

Access to XMLHttpRequest at 'https://playcocola.com/api/' from origin 'https://client.playcocola.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

It was happening randomly, only in production and only in some requests, not all.

The problem was related with the size of the uploaded file and my nginx configuration in production. The solution was here: CORS error upload file ~4mb

# nginx.conf http { [...] client_max_body_size 50M; }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

You don't need to (shouldn't be) generating the headers in every response.

In your case, I would wager the asset request from your browser is being "preflighted" with an OPTIONS request, but the CDN passes on the request without Access-Control request headers. The CDN thus (correctly) receives no CORS response headers from your Rails app, so the browser doesn't even attempt the GET request, and fails with the Cross-Origin error.

"preflighted" requests first send an HTTP request by the OPTIONS method to the resource on the other domain, in order to determine whether the actual request is safe to send

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests

Your CDN needs be set up to forward the correct request headers to your app server such that it knows to generate the CORS headers. Then, the CDN will pass these CORS response headers along to the browser.

When you want OPTIONS responses to be cached, configure CloudFront to forward the following headers: Origin, Access-Control-Request-Headers, and Access-Control-Request-Method.

http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html#header-caching-web-cors

If you make the change to your CDN for those headers and then invalidate your assets, your rack-cors configuration by itself should work just fine.

# 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
Improve this answer

Comments

0

Try adding method and headers in application controller. It worked for me.

 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
Improve this answer

1 Comment

If setting these headers on all requests, this essentially disables CORS protection entirely, which is not a good idea since CORS exists to protect your users from a third party triggering requests on their behalf. This answer should include information about how to limit this to just the asset requests or make a note that it is dangerous to apply this filter to every request in the application.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.