Problem

You keep getting Control Allow Origin errors on fonts that are pulling from your CloudFront CDN

Solution

You need to make changes at CloudFront and your IIS 7 Server

CloudFront Changes

Modify the origin behaviors:

  1. Navigate to the CloudFront Distributions Panel
  2. Select your Distribution
  3. Click Behaviors Tab
  4. Select Behavior from list items
  5. Click Edit
  6. Under “Whitelist Headers” section add the following headers:
    • Access-Control-Allow-Origin
    • Origin
  7. Click “Yes, Edit”
  8. Wait for changes to propagate
  9. Clear cache of any font assets

IIS7 Changes

You will need a new outbound rewrite rule:

 <rule name="Add Cross Origin Access">
        <match serverVariable="RESPONSE_Access_Control_Allow_Origin" pattern=".*" />
        <conditions>
          <add input="{REQUEST_URI}" pattern=".*\.(ttf|otf|eot|woff|svg)\?*.*$" />
        </conditions>
        <action type="Rewrite" value="*"/>
 </rule>
Last modified: August 20, 2014

Author

Comments

waht is REQUEST_URI

Write a Reply or Comment

Your email address will not be published.

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

This site uses Akismet to reduce spam. Learn how your comment data is processed.