AWS Cloudfront 字体文件 CORS

2019独角兽企业重金招聘Python工程师标准>>>

If you are using CloudFront for hosting static assets and having trouble with the CORS which prevents the icons from displaying properly on your website, in this post, I am going to show how to resolve this issue.

As you have already known, the main cause of CORS issue is because your fonts are loaded from a different domain than your website. For example, if your domain is http://example.com and you are using CloudFront domain (which is http://something.cloudfront.net), then you would have CORS issue. To solve this issue, the server must returns Access-Control-Allow-Origin: * header in the response data (see some links at the bottom of this post for more information). However, CloudFront simply ignores this header when caching the assets and the problem still exists.

Perhaps after receiving tons of requests from the community, AWS has finally supported to solve this issue. Open your CloudFront distribution, you would notice a tab called Behaviors. A behavior is a way for you to tell CloudFront how to handle specific resource when going through AWS CloudFront. Our job is to add correct behavior for the fonts so that CloudFront can pass the needed header to the browsers.

Imagine that we are seeing the warning message as below:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://x3dskd59dg.cloudfront.net/assets/glyphicons-halflings-regular.woff. This can be fixed by moving the resource to the same domain or enabling CORS.

I would create new behavior with the following information:

Path Pattern: /assets/glyphicons-halflings-regular.woff

Forward Headers: Whitelist

Whitelist Headers: (This is the most important step, you need to select Origin header and add it to the whitelist in the right column)

All other fields can be left with default.

By doing this, CloudFront will allow the header Access-Control-Allow-Origin: * to go through and visible to the browsers. You might need to Invalidate that font on CloudFront to clear the cache. Now, refresh the browsers and see how cool the icons are :)

In summary, two steps to solve CORS issue on CloudFront are:

1. Make change to Nginx or Apache configuration to add Access-Control-Allow-Origin: * to the response data. You can take a look at some guides: http://enable-cors.org/server_apache.html and http://enable-cors.org/server_nginx.html

2. Add a behavior in CloudFront distribution, remember to whitelist the Origin header

Happy coding!

https://enable-cors.org/server_nginx.html

#
# Wide-open CORS config for nginx
#
location / {
     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        #
        # Tell client that this pre-flight info is valid for 20 days
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
}

 

转载于:https://my.oschina.net/bobchow/blog/3055854