Add CORS to Nginx on AWS Elastic Beanstalk

Apache

Add the following block to your .htaccess file:

<FilesMatch ".(eot|otf|ttf|woff|woff2)">
    Header always set Access-Control-Allow-Origin "*"
</FilesMatch>

Nginx

Add the following location block to your virtual host file (usually within the server directive) and reload Nginx:

location ~* \.(eot|otf|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
}

Invalidate CloudFront Distribution

Once the changes have been made you will need to invalidate the CloudFront cache with a path of “/*”.

Integrating to CloudFront service

It’s simple to config and use CloudFront (a CDN service) for Rails app. 

Just one thing from my experience, regarding to CORS issue on EB when your CSS want get loading font files or font-awesome. Because EB run your app with Nginx server serve public static files, then work around would be overwriting web server config in Nginx with add_header Access-Control-Allow-Origin ‘*’ by creating .ebextensions file something like.

files:
	"/etc/nginx/conf.d/01_app_server.conf":
	mode: "000644"
	owner: root
	group: root
	content: |
	# The content of this file is based on the content of /etc/nginx/conf.d/webapp_healthd.conf
	upstream website_upstream {
	server unix:///var/run/puma/my_app.sock;
	}
	log_format website_healthd '$msec"$uri"'
	'$status"$request_time"$upstream_response_time"'
	'$http_x_forwarded_for';
	server {
	listen 80;
	server_name _ localhost; # need to listen to localhost for worker tier
	if ($time_iso8601 ~ "^(\d{4})-(\d{2})-(\d{2})T(\d{2})") {
	set $year $1;
	set $month $2;
	set $day $3;
	set $hour $4;
	}
	access_log /var/log/nginx/access.log main;
	access_log /var/log/nginx/healthd/application.log.$year-$month-$day-$hour website_healthd;
	location / {
	proxy_pass http://website_upstream; # match the name of upstream directive which is defined above
	proxy_set_header Host $host;
	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	}
	location /assets {
	alias /var/app/current/public/assets;
	gzip_static on;
	gzip on;
	expires max;
	add_header Cache-Control public;
	add_header Access-Control-Allow-Origin '*';
	add_header Access-Control-Allow-Credentials 'true';
	add_header Access-Control-Allow-Methods 'GET, POST, HEAD, OPTIONS';
	add_header Access-Control-Allow-Headers 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
	}
	location /public {
	alias /var/app/current/public;
	gzip_static on;
	gzip on;
	expires max;
	add_header Cache-Control public;
	}
	add_header Strict-Transport-Security "max-age=15768000; includeSubDomains" always;
	gzip on;
	gzip_http_version 1.1;
	gzip_vary on;
	gzip_comp_level 6;
	gzip_proxied any;
	error_page 500 502 503 504 /500.html;
	client_max_body_size 10M;
	keepalive_timeout 10;
	}
	container_commands:
	01_remove_webapp_healthd:
	command: "rm -f /opt/elasticbeanstalk/support/conf/webapp_healthd.conf /etc/nginx/conf.d/webapp_healthd.conf"
	02_reload_nginx:
	command: "sudo service nginx reload"

After running deploy app with overwriting Nginx server script above, you also need to re-deploy CloudFront distribution.