部署Django应用到Heroku时出现Font Awesome预加载警告（开发环境无此问题）

问题重现 #

首次在Heroku部署Django应用后，Chrome调试器出现以下警告：

资源https://ka-f.fontawesome.com/releases/v6.6.0/webfonts/free-fa-solid-900.woff2已通过link preload预加载，但未在window加载事件后几秒内使用。请确保其有合适的as值且是有意预加载的。

删除项目中所有Font Awesome引用（包括模板、应用配置）后警告仍存在；重新添加Font Awesome Kit脚本<script src="https://kit.fontawesome.com/fe9b6298ed.js" crossorigin="anonymous"></script>后，新增跨域错误：

发现对'https://ka-f.fontawesome.com/releases/v6.6.0/webfonts/free-fa-solid-900.woff2'的预加载，但因请求凭证模式不匹配未被使用，请检查crossorigin属性。

解决方案 #

• 清理Heroku缓存
  Heroku会缓存静态资源和编译后的模板，本地修改可能不会同步到线上。执行命令清除缓存后重新部署：

  heroku repo:purge_cache -a your-app-name
  

• 排查间接引用来源
  检查页面中第三方资源（如jQuery CDN或其他引入的框架）是否间接插入了Font Awesome预加载标签：

  1. 打开Chrome开发者工具的网络面板
  2. 筛选link类型请求，查看哪个资源触发了Font Awesome字体的预加载

• 修复Font Awesome Kit跨域问题（若保留Kit）
  如果需要继续使用Font Awesome CDN Kit：

  1. 确认Kit脚本的crossorigin属性为"anonymous"
  2. 登录Font Awesome官网，进入你的Kit设置页面，将Heroku应用域名（如your-app-name.herokuapp.com）添加到允许域名列表
  3. 若仍有问题，改用本地引入：下载Font Awesome静态资源到Django的static目录，在模板中引入本地CSS替代CDN脚本

• 检查模板与中间件
  确认所有模板文件（包括继承的父模板、include的片段）无残留Font Awesome引用；排查Django中间件是否在HTTP响应中自动插入了预加载标签

用户提供的相关代码 #

base.html：

{% load static %}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Dotstory</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" type="image/x-icon" href="{% static 'storymode/images/favicon.png' %}"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>

索引页模板：

{% extends "base.html" %}

{% block content %}
<h1>n</h1>
    <main class="text-center mt-20" id="game">
        <h1 class="mb-4">This is the Main Page</h1>
            {% for story in stories %}
                <a href="/story/{{story.pk}}"><h1>{{story.title}}, {{story.pk}}</h1></a>
                <br>
            {% endfor %}
    </main>
{% endblock content %}

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