React Helmet引入外部脚本遇MIME类型不匹配错误求助

你的错误根源是脚本路径未被正确解析：URL里的%PUBLIC_URL%没有被处理，导致服务器找不到目标.js文件，返回了404页面（HTML格式），浏览器检测到MIME类型（text/html）和脚本要求的text/javascript不匹配，因此拦截了资源。

以下是具体解决步骤：

• 正确引用PUBLIC_URL变量
  在Create React App中，%PUBLIC_URL%需通过process.env.PUBLIC_URL动态获取，直接写在字符串中无法被解析。修改代码如下：

  import { Helmet } from "react-helmet";
  
  <Helmet>
    <script src={`${process.env.PUBLIC_URL}/js/resource.js`} type="text/javascript" />
  </Helmet>
  

• 确认静态文件位置
  确保resource.js存放在项目根目录的public/js/文件夹下，Create React App仅会从public目录读取静态资源，不要将该文件放在src目录内。

• 自定义服务器需配置MIME类型
  若使用非Create React App默认的开发服务器，需检查服务器配置，确保对.js文件返回正确的Content-Type: text/javascript响应头，避免返回HTML类型的404页面。

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