Phusion乘客+ Heroku + Cloudfront：CORS配置 [英] Phusion Passenger + Heroku + Cloudfront: CORS Configuration

问题描述

我有使用Cloudfront从cdn.myapp.com提供的字体。

我使用的是

并更改了原始设置（原始选项卡）到匹配查看器（如果您要使用SSL）。

最后，使用 / * 在Invalidations选项卡中创建一个无效（如果是新配置则无需这样做）

希望这可以为某人节省时间。

I have fonts served from cdn.myapp.com using Cloudfront.

I was using the font_assets gem which helped me sending CORS headers to have my fonts accepted in Firefox (among others).

I recently moved my webserver to Phusion Passenger, I'm very happy with this (speed!).

But since my migration, I can't send these headers and I suspect nginx to be responsible for it.

How can I send custom headers with Phusion on Heroku? Can I access nginx config from heroku, or is there another config to set?

Thanks for support!

解决方案

I tried using the rack-cors gem but it took me a while to notice that although using Heroku's Rails 12 Factor Gem Phusion Passenger 5.0.10 (Nginx) was serving the assets.

Just for future reference, based on @user664833's solution, here's my setup for running a Rails 4.2 application hosted on Heroku with Phusion Passenger as server and Amazon Cloudfront as CDN, using cdn.my-domain.com as a CNAME for the distribution and restricting only to GET and HEAD requests for subdomains of my-domain.com:

# config/nginx.conf.erb
location @static_asset {
  gzip_static on;
  expires max;
  add_header Cache-Control public;
  add_header ETag "";
  # added configuration for CORS for font assets
  if ($http_origin ~* ((https?:\/\/[^\/]*\.my-domain\.com(:[0-9]+)?)) {
    add_header 'Access-Control-Allow-Origin' "$http_origin";
    add_header 'Access-Control-Allow-Credentials' 'true'; # only needed for SSL
    add_header 'Access-Control-Allow-Methods' 'GET, HEAD';
    add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Mx-ReqToken,X-Requested-With';
  }
  # end of added configuration
}

I edited the cache behavior to whitelist the Origin header.

And changed the Origin Settings (Origin tab) to Match viewer (in case you want to use SSL).

Finally, create an invalidation (no need to do this if it is a new configuration) in the Invalidations tab, using /* to clear everything.

Hopefully, this will save time to someone.

这篇关于Phusion乘客+ Heroku + Cloudfront：CORS配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！