Heroku + CDN Cloudfront + Fonts - Firefox bugs

橙三吉。 提交于 2019-12-30 06:51:12

问题


Recently we moved our assets on a CDN Cloudfront. We have noticed that the surfaces were broken on Firefox. After a few minutes of searching, it was a story of CORS. We allowed the field Cloudfront.

application_controller:

after_filter :set_access_control_headers

def set_access_control_headers
  headers['Access-Control-Allow-Origin'] = CDN_CLOUDFRONT
end

production.rb:

CDN_CLOUDFRONT = "http://xxx.cloudfront.net"

This worked very well until yesterday. After several searches and reflections, I have not found a solution.

Any idea?


回答1:


I haven't worked with a Heroku setup, but AFAIK (and as illustrated at developer.mozilla.org), the header Access-Control-Allow-Origin should reflect a value of the domain which consumes static assets from the CDN.

E.g.: For a website hosted at http://mydomain.net and consuming assets from http://wefe342r34r23.cloudfront.net

headers['Access-Control-Allow-Origin'] = 'http://mydomain.net'

Will allow mydomain.net to access assets via http://wefe342r34r23.cloudfront.net. In other words, replacing CDN_CLOUDFRONT with your website's domain name should solve the problem.

Hope this helps.

P.S.: I'm not sure how your setup worked until yesterday. :)

P.P.S: Adding Alternate Domain Names (CNAMEs) to your CDN will help you in a scenario wherein you want to quickly discard an existing distribution exposed over http://xxx.cloudfront.net and start using a fresh distribution http://yyy.cloudfront.net. You won't need to change anything in your application codebase if you are using an Alternate Domain Name such as http://cdn.mydomain.net in that case.




回答2:


This is copy of what I posted in another Stack Exchange page related to the same topic, and I am leaving this in case someone else has the same issues but didn't find the right answer.

I had the same issue with a Rails 3 app on Heroku; Font-Awesome icons were not showing because I was running my assets through Sumo CDN.

There are several replies related to this, one of which is to put an after_filter in your application_controller to set the header value (by freemanoid), but that didn't work for me, and I had to use the custom middleware suggested by Peter Marklund.

Both solutions are posted here under the Rails 3.1 versions: How to set access-control-allow-origin in webrick under rails?




回答3:


workaround I have used - upload the fonts separately to S3 and set the cors configuration on the bucket. Hardcode the font links to the S3 fonts. All assets (other than fonts) will come from cloudfront - your fonts will come from S3. Its ugly - but it works....



来源:https://stackoverflow.com/questions/15413639/heroku-cdn-cloudfront-fonts-firefox-bugs

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!