服务器以“application/octet-stream”的非 JavaScript MIME 类型进行响应对每个 HTML 的模块脚本强制执行严格的 MIME 类型检查答案

【问题标题】：The server responded with a non-JavaScript MIME type of "application/octet-stream" Strict MIME type checking is enforced for module scripts per HTML服务器以“application/octet-stream”的非 JavaScript MIME 类型进行响应对每个 HTML 的模块脚本强制执行严格的 MIME 类型检查
【发布时间】：2021-08-02 16:24:21
【问题描述】：

这是我的项目结构：

node_modules.
server.js
公开：
- gsl:
  - fragment.glsl
  - vertex.glsl
- index.html
- main.js
- img.jpg
- style.css

我有一个简单的服务器设置来提供 three.js 动画 server.js

const express = require('express');
const path = require('path')
const app = express();
app.use(express.static('public')
const port = 5000;
app.listen(port, ()=>{

  console.log(`listening on port ${port}`)
});

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css" type="text/css" media="screen">
      <script src="main.js" type="module"></script>
</head>
<body>
<h1>heloo</h1> 
<canvas id="app"></canvas> 
   
</body>

main.js

import * as THREE from 'https://unpkg.com/three@0.126.1/build/three.module.js';

import { OrbitControls } from 'https://unpkg.com/three@0.126.1/examples/jsm/controls/OrbitControls.js';
import vertexShader from "./glsl/vertex.glsl";
import fragmentShader from "./glsl/fragment.glsl";
import img from "./mannequin.jpg";

class Gl {
    
  constructor() {

    
    this.scene = new THREE.Scene();

    this.camera = new THREE.PerspectiveCamera(
      45,
      window.innerWidth / window.innerHeight,
      0.1,
      100
    );

    this.camera.position.z = 1;
    this.renderer = new THREE.WebGLRenderer({
      canvas: document.querySelector("#app"),
      antialias: true
    });
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.renderer.setClearColor(0xffffff, 1);

    this.clock = new THREE.Clock();

    this.controls = new OrbitControls(this.camera, this.renderer.domElement);

    this.onResize();
  }

  init() {
    this.createMesh();
    this.addEvents();
  }

  createMesh() {
    this.geometry = new THREE.PlaneGeometry(0.4, 0.6, 32, 32);
    this.material = new THREE.ShaderMaterial({
      vertexShader,
      fragmentShader,
      uniforms: {
        uTime: { value: 0.0 },
        uTexture: { value: new THREE.TextureLoader().load(img) }
      },
      // wireframe: true,
      side: THREE.DoubleSide
    });
    this.mesh = new THREE.Mesh(this.geometry, this.material);
    this.scene.add(this.mesh);
  }

  addEvents() {
    window.requestAnimationFrame(this.run.bind(this));
    window.addEventListener("resize", this.onResize.bind(this), false);
  }

  run() {
    requestAnimationFrame(this.run.bind(this));
    this.render();
  }

  render() {
    this.material.uniforms.uTime.value = this.clock.getElapsedTime();
    this.renderer.render(this.scene, this.camera);
  }

  onResize() {
    const w = window.innerWidth;
    const h = window.innerHeight;

    this.camera.aspect = w / h;
    this.camera.updateProjectionMatrix();

    this.renderer.setSize(w, h);
  }
}

export default Gl;

 
const scene = new Gl();
scene.init();

当我启动服务器并转到本地主机端口时，我收到以下错误：

vertex.glsl:1 加载模块脚本失败：服务器以“application/octet-stream”的非 JavaScript MIME 类型响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。

fragment.glsl:1 加载模块脚本失败：服务器以“application/octet-stream”的非 JavaScript MIME 类型响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。

mannequin.jpg:1 加载模块脚本失败：服务器以“image/jpeg”的非 JavaScript MIME 类型响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。

【问题讨论】：

标签： javascript html node.js express three.js

【解决方案1】：

浏览器仅支持带有 import 的 JavaScript 模块。

如果您想导入其他内容（如图像或 glsl 文件），则需要使用带有合适加载器模块（如 webpack-glsl-loader）的 Webpack 并在将应用程序加载到浏览器之前构建应用程序。

【讨论】：

感谢您的回答。我有点想避免使用任何捆绑器。还有其他方法吗？