如何在 NodeJS-App 中设置 Js-File 的 Content-Type

Question

我在我的 NodeJS 服务器上打开 js 文件时遇到问题，因为它总是会指定 my.js 文件的 Content-Type 为“text/html”。

目标是将用户输入从 html 表单发送到 JavaScript 文件以进行一些计算，然后从中创建一个图形。

在我的 app.js（节点服务器）上，我有：

const http = require('http');
const fs = require('fs');
const port = 3000;
const server = http.createServer(function(req, res) {
res.writeHead(200, { 'Content-Type': 'text/html' })
fs.readFile('index.html', function(error, data) {
        if (error) {
            res.writeHead(404)
            res.write('Error: File Not Found')
        } else {
            res.write(data)
        }
        res.end()
    })
})

这将正确打开我的 html 文件。 这是一个如下的输入表单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="module" src="./js/index.js"></script> 
    <title>Node-App</title>
</head>
<body>
    Enter Name and Birthdate:<br><br>
    <form action="#" method="post" id="frm">
        <label for="Name">Name:</label><br>
        <input type="text" id="nam"><br>

        <label for="Date">Date:</label><br> 
        <input type="text" id="dat"><br>

        <input type="button" onclick="userInput()" value="Plot">
    </form>

但是现在我想通过单击一个按钮从这里打开一个 js 函数，这给了我错误“用户输入未定义”。
不足为奇，因为加载页面已经抛出错误“从“www/js/index.js”加载模块被禁用的 MIME-Type (text/html) 阻止”

我的 JS 文件看起来像这样，但无论如何都没有正确加载：

function userInput() {
    console.log("Test The Function");
}

我可以在 .js-files 的 http-header 中的“网络分析”中看到它的 Content-Type 是“text/html”，所以我的问题是如何更改它？

我已经尝试了几件事，例如通过键入res.writeHead(200, { 'Content-Type': ['text/html', application/javascript] })或res.setHeader("Content-Type": "application/javascript"); 但它要么不再加载 html，要么什么也不做。

我还尝试将我的 index.html 中的 Content-Type 设置为像<script type="application/javascript" src="./js/index.js"></script>这样的脚本标签，但它也会发生变化没有什么。

谢谢你的帮助！

Answer 1

By default when you serve an html page to the browser, it will analyze your document and if it finds links to css or javascript, it will make an HTTP request to the server that holds these assets.

当您通过 devTools 打开浏览器控制台时，您可能会注意到您收到一条错误消息，告诉您无法获取请求的资源（javascript 文件的名称），或者您的页面无限加载而没有返回响应.

所以从中我们可以理解一个非常简单的事情，那就是你必须管理存储在服务器中的资源的路由。

例如，浏览器将使用 GET 方法和 url http://localhost:3000/script.js 查询您的服务器，之后您的服务器必须为它提供此资产。

这是一个例子来说明这一点：

想象一个包含以下内容的文件结构：

一个公用文件夹，它本身包含一个“资产”文件夹和一个“html”文件夹。
包含服务器逻辑的 server.js 文件。

此 html 文件夹将包含要提供的 html 文件。

assets 文件夹将包含“script.js”和“styles.css”文件。

 "use strict"; const http = require("http"); const fs = require("fs"); const os = require("os"); const path = require("path"); const host = "localhost"; const port = 3000; const server = http.createServer((req, res) => { if (req.method === "GET") { if (req.url === "/") { const readStream = fs.createReadStream(path.join(process.cwd(), "public", "html", "index.html")); res.writeHead(200, { "Content-Type": "text/html", }); readStream.pipe(res); } if (req.url === "/styles.css") { const readStream = fs.createReadStream(path.join(process.cwd(), "public", "assets", "styles.css")); res.writeHead(200, { "Content-Type": "text/css", }); readStream.pipe(res); } if (req.url === "/script.js") { const readStream = fs.createReadStream(path.join(process.cwd(), "public", "assets", "script.js")); res.writeHead(200, { "Content-Type": "text/html", }); readStream.pipe(res); } } }); server.on("listening", () => { console.log(`Server running on http://${host}:${port}`); }) server.listen(port); process.on("SIGINT", () => { console.log(`${os.EOL}Server interrupted by 'SIGINT'`); process.exit(1); });

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Node-App</title> <link rel="stylesheet" href="styles:css"> </head> <body> Enter Name and Birthdate:<br><br> <form action="#" method="post" id="frm"> <label for="Name">Name:</label><br> <input type="text" id="nam"><br> <label for="Date">Date.</label><br> <input type="text" id="dat"><br> <input type="button" onclick="userInput()" value="Plot"> </form> <script src="script.js"></script> </body>

在此示例中，我使用“fs”模块中的 createReadStream() 来提高性能，我强烈建议您在提供 static 文件时使用它。

现在，当浏览器向您的服务器发出一个或多个请求时，涉及到我的示例中的“script.js”或“styles.css”等资产，您的服务器将为它提供请求的文件。

希望这有帮助，祝你好运！

如何在 NodeJS-App 中设置 Js-File 的 Content-Type

问题描述

1 个解决方案

解决方案1
0 2022-09-02 16:14:36

如何在 NodeJS-App 中设置 Js-File 的 Content-Type

问题描述

1 个解决方案

解决方案1 0 2022-09-02 16:14:36

解决方案1
0 2022-09-02 16:14:36