Angular 5引用HTTPS服务器CSS文件遇CORS跨域问题求助

Hey there, let’s work through this CORS issue you’re hitting with font files from your IIS production server. I run into this all the time—even if your Web API has CORS set up correctly, static assets like fonts and CSS don’t inherit those settings because IIS handles them separately from API requests. The error you’re seeing is specifically about the font file missing the Access-Control-Allow-Origin header, so let’s fix that.

Here are a few reliable solutions:

Option 1: Add HTTP Response Headers via IIS Manager #

This is the most straightforward method for quick setup:

• Open IIS Manager and navigate to your production server’s site
• Double-click the HTTP Response Headers feature
• Click Add on the right-hand side, then enter:
  • Name: Access-Control-Allow-Origin
  • Value: http://localhost:4200 (use * to allow all origins, but stick to specific domains in production for security)
• If your app uses credentials like cookies, add another header: Access-Control-Allow-Credentials with value true

Pro tip: If you only want to apply this to the font directory (Content/Styles/fonts/), select that specific folder in IIS instead of the root site before adding the headers.

Option 2: Configure via web.config #

If you prefer managing settings through config files, edit your site’s web.config with these additions:

<configuration>
  <system.webServer>
    <!-- Add CORS headers for static assets -->
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="http://localhost:4200" />
        <!-- Uncomment below if you need to support credentials -->
        <!-- <add name="Access-Control-Allow-Credentials" value="true" /> -->
      </customHeaders>
    </httpProtocol>

    <!-- Optional: Ensure IIS uses correct MIME types for font files (prevents hidden loading issues) -->
    <staticContent>
      <remove fileExtension=".ttf" />
      <mimeMap fileExtension=".ttf" mimeType="font/ttf" />
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>
  </system.webServer>
</configuration>

This not only adds the required CORS headers but also fixes MIME type mapping for fonts—sometimes incorrect MIME types can cause indirect loading failures even if CORS is set up.

Option 3: Use URL Rewrite for Granular Control #

If you need more flexible rules (like restricting to specific request types or resources), use IIS’s URL Rewrite module:

1. First, make sure the URL Rewrite module is installed in IIS (check under "Modules" in IIS Manager; if not, add it via the IIS feature installer)
2. Add this to your web.config inside the <system.webServer> section:

<rewrite>
  <outboundRules>
    <rule name="Add CORS Headers for Fonts" preCondition="Has Origin Header">
      <match serverVariable="RESPONSE_Access-Control-Allow-Origin" pattern=".*" />
      <action type="Rewrite" value="http://localhost:4200" />
    </rule>
    <preConditions>
      <preCondition name="Has Origin Header">
        <add input="{HTTP_ORIGIN}" pattern=".*" />
      </preCondition>
    </preConditions>
  </outboundRules>
</rewrite>

This rule only adds the CORS header when the request includes an Origin header, which aligns with proper CORS behavior.

Quick Notes Before You Go #

• When you deploy to production, replace http://localhost:4200 with your Angular app’s live domain
• If your static assets are hosted on a CDN, configure CORS headers in the CDN settings instead of IIS
• Always clear your browser cache after making changes—cached old headers can make it look like your fixes aren’t working

内容的提问来源于stack exchange，提问作者user9036522