NodeJS 因为其MIME类型('text/html')不可执行,并且启用了严格的MIME类型检查

pvcm50d1  于 2023-06-22  发布在  Node.js
关注(0)|答案(3)|浏览(424)

我正在使用nodejs和webpack4,我试图将main.js文件链接到index.html。我尝试了网络上所有可能的解决方案,似乎没有一个对我有效。我是一个新手,欢迎提出建议,请让我知道我做错了什么。
以下是我看到的错误日志:

GET http://localhost:3000/dist/main.js net::ERR_ABORTED
localhost/:1
Refused to execute script from 'http://localhost:3000/dist/main.js' 
because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

public/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title> 
</head>
<body>

    <form action="/" method="POST" accept-charset="utf-8">
        <input type="email" name="email" placeholder="Email">
        <input type="submit" name="submit">
    </form>

    <script type="text/javascript" src="dist/main.js"> </script>

</body>
</html>

/app.js

const express = require('express');
const app  = express();
const http = require('http');

//Middleware
app.use(express.static(__dirname + '/public' ));

app.post('/', function( req ,res){
    res.send("Success");
});

app.listen(3000, function(){
    console.log('Server running on port 3000');
});

文件结构

news_letter //Root directory
|_ dist
|   |_ main.js
|_ public
|   |_ index.html
|_ src
|   |_ index.js
|_ app.js
pw136qt2

pw136qt21#

你需要main.js文件在公用文件夹中.
它看起来像你把main.js文件在dist/文件夹和index.html文件在public/文件夹。
但是您只将app.js文件中的一个目录设置为“静态文件目录”

app.use(express.static(__dirname + '/public' ));

html中的每个路径都是相对于公用文件夹中的路径的。因此,将您的dist/文件夹移动到public/文件夹中,一切都应该正常

文件结构

news_letter //Root directory
|_ public
|   |_ dist
|   |   |_ main.js
|   |_ index.html
|_ src
|   |_ index.js
|_ app.js
oknrviil

oknrviil2#

在我的例子中,我还必须将中间件行更改为:

app.use('/public', express.static(__dirname + '/public' ));

而不是:

app.use(express.static(__dirname + '/public' ));

基于documentation的原因是:
但是,为express.static函数提供的路径是相对于启动节点进程的目录的。如果您从另一个目录运行express应用程序,则使用您要提供服务的目录的绝对路径更安全:

app.use('/static', express.static(path.join(__dirname, 'public')))
af7jpaap

af7jpaap3#

以下为我工作。
添加下面的标题作为中间件固定在我的情况下

app.use((req, res, next) => {
  res.setHeader('X-Content-Type-Options', 'nosniff');
  next();
});

相关问题