如何修复模块因不允许的 MIME 类型(“application/octet-stream”)而被阻止?

问题描述 投票:0回答:1

我正在尝试使用 Netlify CLI 部署我制作的网站(使用 Vite、Typescript 创建的 React 应用程序),但在部署后,我检查了应用程序未加载的 URL,它只是显示 Module from '...main.js 。 tsx' 由于不允许的 MIME 类型(“application/octet-stream”)而被阻止。 那么html页面中这个script标签的类型应该是什么?

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href=".">
    <link rel="shortcut icon" href="#">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
      href="https://fonts.googleapis.com/css2?family=Anta&family=Assistant:wght@400;600&family=BIZ+UDPMincho&family=Black+Han+Sans&family=Dela+Gothic+One&family=East+Sea+Dokdo&family=Hina+Mincho&family=Jua&family=Klee+One&family=Luckiest+Guy&family=Nanum+Brush+Script&family=Nanum+Gothic&family=Nanum+Gothic+Coding:wght@400;700&family=Qwigley&family=Rammetto+One&family=Reggae+One&family=Roboto:wght@300&family=RocknRoll+One&family=Rowdies&family=Rubik+Glitch&family=Rubik+Marker+Hatch&family=Source+Code+Pro:wght@200;400;600;900&family=Squada+One&family=Teko:[email protected]&display=swap"
      rel="stylesheet">
    <title>Manga Shop</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src='/src/main.tsx'></script>
  </body>
</html>

我尝试将类型更改为“text/javascript”,但也不起作用。我尝试完全删除该类型,但仍然不起作用。

reactjs typescript deployment mime-types netlify
1个回答
0
投票

出现此问题是因为您尝试使用 type="module" 加载 .tsx 文件。但是,浏览器只能理解 JavaScript,不能理解 TypeScript,因此您需要在提供服务之前将 TypeScript 文件编译为 JavaScript。

由于您的 React 应用程序是使用 Vite 创建的,因此请确保在部署之前构建项目。

要构建应用程序,请运行:

npm run build
# or
yarn build

Vite会在dist文件夹中生成一个index.html文件,其中相应的脚本标签指向编译后的JavaScript文件。

脚本标签看起来像这样:

<script type="module" src="/assets/main.[hash].js"></script>
© www.soinside.com 2019 - 2024. All rights reserved.