ReactJS加载外部脚本时如何修改MIME类型为text/javascript？

嘿，这个问题我之前也碰到过，其实本质要么是服务器返回的不是正确的JS文件MIME类型，要么是你的脚本路径写错了，导致请求返回的是404错误页面（也就是text/html类型的内容），下面给你几个具体的解决步骤：

1. 先检查脚本路径是否正确 #

这是最常见的原因！如果你的脚本是放在React项目的public文件夹下（比如用Create React App创建的项目），那你应该使用根路径（开头加/）来引用，而不是相对路径./——因为./会根据当前页面的路由路径去查找文件，很容易找不到，返回404页面。

修改后的代码示例：

componentDidMount () {
  const script = document.createElement("script");
  script.src = "/live_w_locator.js"; // 根路径指向public文件夹下的脚本
  script.async = true;
  script.type = "text/javascript"; // 显式指定MIME类型，给浏览器明确提示
  document.body.appendChild(script);
}

你可以打开浏览器开发者工具（F12），切换到Network标签，刷新页面后找到这个脚本的请求：

• 如果状态码是404：那肯定是路径错了，调整路径到正确位置
• 如果状态码是200：查看Response Headers里的Content-Type，确认是不是text/javascript或application/javascript

2. 配置服务器返回正确的MIME类型 #

如果脚本是你自己的服务器托管的，需要确保服务器对.js文件返回正确的MIME类型：

• Nginx：在配置文件中添加或确认存在以下配置，确保JS文件的MIME类型被正确识别：

  types {
      application/javascript js;
  }
  

• Apache：在.htaccess文件中添加这条规则：

  AddType text/javascript .js
  

如果是第三方脚本的话，那大概率是对方服务器的配置问题，你可以检查对方的脚本URL是否正确，或者联系对方修复。

3. Create React App 项目的额外注意点 #

如果你用的是Create React App，一定要把外部脚本放在public文件夹里——src文件夹里的文件会被Webpack处理，直接用路径引用静态脚本会出现找不到的问题，只有public文件夹里的资源会被作为静态资源直接托管。

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