node.js-使用JavaScript的html的res.WriteHeadContentType

如何解决node.js-使用JavaScript的html的res.WriteHeadContentType

我收到错误消息Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

您难道不知道，我应该在res.WriteHead - Content-Type中而不是text/html中拥有什么？

我使用node.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('Something does not work well')
        }else {
            res.write(data)
        }
        res.end()
    })
})

server.listen(port,function(error){
    if(error){
        console.log('Something went wrong' + error)
    } else {
        console.log('Everything is working fine on port ' + port)
    }   
})

如果index.html不包含任何javascript，则一切正常。问题是，如果它加载了本示例中的某些javascript。

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='root'></div>
    <script type='module' src='index.js'></script>
    
</body>
</html>

JavaScript文件如下所示，它是Reactjs：

import React from 'react'
import ReactDOM from 'react-dom'


ReactDOM.render(<h1>'Hello world'</h1>,document.getElementById('root'))

非常感谢您的帮助。

瓦茨拉夫

解决方法

此刻，您的本地Web服务器使用具有提供的MIME类型text/html的html文件响应每个请求。通过添加script标记，您是在要求浏览器请求一个具有text/javascript MIME类型的javascript文件。取而代之的是，您的Web服务器将返回MIME类型为text/html的html文件。这就是触发遇到的错误的原因。您应该通过重写Web服务器来处理静态文件请求或使用类似serve-static的模块来解决此错误。

浏览器将下载您的HTML文件，对其进行解析并在其中找到一个<script>标记，然后将向您的服务器请求index.js。

当您的网络服务器收到该请求时，它将在浏览器需要脚本文件时将其发送给标记为index.html的{{1}}（因为您的网络服务器已编程为发送该文件和mime类型传入的请求是什么）。当浏览器请求text/html或搜索引擎请求/favicon.ico时，它也会做同样的事情。那就是你的问题所在。

您需要让您的Web服务器检查所请求的传入URL并根据该URL进行分支，并不仅处理index.html，还处理index.js和您在网站中可能使用的任何其他文件。

仅对于两个特定文件，您可以在服务器处理程序中放置一个if / else，它将检查http请求是什么，并相应地分支如下：

/robots.txt

实际上，对于大型项目，大多数人都有一个代码分支，可以通过在特定目录（为公共文件指定）或目录层次结构中查找与请求的传入路径匹配的内容来自动处理所有静态资源。在Express框架中，可以使用const http = require('http') const fs = require('fs') const port = 3000; function sendFile(filename,contentType,callback) { fs.readFile(filename,function(error,data) { if (error) { console.log(error); res.writeHead(404,{ 'Content-Type': 'text/plain' }); res.write('Something does not work well'); } else { res.writeHead(200,{ 'Content-Type': contentType }); res.write(data); } res.end(); if (callback) { callback(error); } }); } const server = http.createServer(function(req,res) { if (req.url === "/index.js") { sendFile('index.js','text/javascript'); } else if (req.url === "/") { sendFile('index.html','text/html'); } else { res.statusCode = 404; res.end(); } }) server.listen(port,function(error) { if (error) { console.log('Something went wrong' + error) } else { console.log('Everything is working fine on port ' + port) } })完成。还有其他一些库可以在没有Express的情况下进行此类操作，或者您可以编写自己的库，尽管这样做时需要注意一些安全问题（尤其是在路径中使用express.static()段来确保攻击者可以不要浏览服务器硬盘上不应访问的区域。