You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

部署GitHub后JavaScript与React代码遭浏览器拦截的问题求助

问题:React项目脚本因MIME类型错误无法执行

浏览器报错:

Refused to execute script from 'https://frontendapp-vo2y.onrender.com/1kamara/great_brain.git/static/js/main.d9d6534a.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

项目public文件夹下的HTML文件代码:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="theme-color" content="#000000" />
      <meta
         name="description"
         content="Web site created using create-react-app"
      />
      <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
      <!--
         manifest.json provides metadata used when your web app is installed on a
         user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
         -->
      <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
      <!--
         Notice the use of %PUBLIC_URL% in the tags above.
         It will be replaced with the URL of the `public` folder during the build.
         Only files inside the `public` folder can be referenced from the HTML.

         Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
         work correctly both with client-side routing and a non-root public URL.
         Learn how to configure a non-root public URL by running `npm run build`.
         -->
      <title>React App</title>
   </head>
   <body>
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div id="root"></div>
      <!--
         This HTML file is a template.
         If you open it directly in the browser, you will see an empty page.

         You can add webfonts, meta tags, or analytics to this file.
         The build step will place the bundled scripts into the <body> tag.

         To begin the development, run `npm start` or `yarn start`.
         To create a production bundle, use `npm run build` or `yarn build`.
         -->
   </body>
</html>

完整项目代码对应指定仓库版本,求修复指导,感谢!


修复方案

这个错误的核心是服务器返回的JS文件MIME类型为text/plain,不符合浏览器要求的可执行脚本类型(需为application/javascript),严格MIME检查机制因此阻止了脚本执行。按以下步骤排查修复:

1. 修正Render部署的静态资源配置

  • 确认静态站点的构建输出目录设置为build,Render会自动处理大部分MIME类型,但如果仍有问题,可在项目根目录添加_headers文件:
    /static/js/*
      Content-Type: application/javascript
    
    该文件会告诉Render为JS文件返回正确的MIME类型。

2. 调整PUBLIC_URL配置

错误URL中包含多余的.git后缀,说明PUBLIC_URL配置异常:

  • 在项目根目录创建或编辑.env文件,设置正确的PUBLIC_URL:
    PUBLIC_URL=/1kamara/great_brain
    
  • 执行npm run build重新构建,确保资源路径中不再包含.git后缀。

3. 验证构建产物路径

构建完成后,打开build/index.html,检查JS文件的引用路径是否正确,确认路径能直接访问到对应的资源文件。

4. 清除浏览器缓存

浏览器可能缓存了错误的响应头,清除缓存后重新加载页面,验证问题是否解决。


内容的提问来源于stack exchange,提问作者Abubakar M Kamara

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.19 05:07:49