No 'Access-Control-Allow-Origin' header is present on the requested resource?

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.rbRails.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]  endend

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

I had everything properly configured:

# config/initializers/cors.rbRails.application.config.middleware.insert_before 0, Rack::Cors do  allow do    origins "*"    resource "*",      headers: :any,      methods: [:get, :post, :put, :patch, :delete, :options, :head]  endend

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.confhttp {  [...]  client_max_body_size 50M;}