by

You may be having the following type of error after you enable CDN on your WordPress:

Font from origin 'http://xxxxxxx.cloudfront.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.domain.com' is therefore not allowed access.

That's because you do not have the "Access-Control-Allow-Origin" header set by the web-server of the origin, which is Apache or Amazon S3.

You can verify this with the following command and you will not see the header:

curl -I -s -X GET -H "Origin: www.domain.com" http://xxxxxx.cloudfront.net/yyy.png

1- With S3: In order to set that header in S3, refer to the AWS Documentation.

2- Without S3: 

2-a: CloudFront:

– Edit Behaviors

– Change "Allowed HTTP Methods" to GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE

– Change "Forward Forward" headers to "Whitelist"

– Add "origin" to Whitelist headers

2-b: Apache

You need to You just need the following to be added under the Document section in your httpd.conf:

Header set Access-Control-Allow-Origin "*"

and gracefuly restart your http server:

apachectl -k graceful

Check if the header appeared with the "curl" command previously we used.

HTTP/1.0 200 OK

Content-Type: image/png

Content-Length: 299245

Date: Wed, 16 Dec 2015 22:28:00 GMT

Server: Apache

X-Frame-Options: SAMEORIGIN

Last-Modified: Wed, 09 Dec 2015 15:07:22 GMT

ETag: "490ed-52678727d1480"

Accept-Ranges: bytes

Access-Control-Allow-Origin: *

X-Cache: Miss from cloudfront

X-Amz-Cf-Id: e14A-xV0D-ajm0S7wLe696YombjT8zKCmbr0LL8NmqlMarArJo1jnw==

X-Cache: MISS from 213.155.126.5

X-Cache-Lookup: MISS from 213.155.126.5:3128

Via: 1.1 cxxxxxx4.cloudfront.net (CloudFront), 1.0 213.155.126.5 (squid/3.1.23)

Connection: keep-alive