为什么我的 Node.js HTTP2 服务器无法正确提供静态文件和 JavaScript？

Question

所以我目前正在尝试制作一个简单的页面，该页面将使用按钮发送请求。我正在努力让服务器托管 index.html 而没有任何问题。我遇到了两个问题。

如果我使用运行不正常的服务器代码，控制台将记录客户端中请求发送代码的问题。任何其他服务器代码都不起作用并给我带来未定义的错误。

我发现，当我使用实时服务器 VSCode 扩展时，它可以正常生成请求，但实际上无法将请求发送到服务器，因为由于扩展，服务器代码实际上并未运行。如果我尝试将我自己的服务器与 Node server.js 一起使用，该代码将仅适用于我之前编写的非常特定的服务器代码，该代码无法正常工作并给我带来一些错误。

这里是负责调用Javascript发送请求的index.html代码：

<button id="sendOfferButton">Send Offer</button>
<p id="status">Status: Waiting for interaction...</p>
<script src="script.js"></script>

下面是 server.js 代码，它将允许 html 工作，但给我一个 script.js 不起作用的问题，并给我这个控制台错误：

未捕获的语法错误：意外的标记'<'

我测试发现与此行相关：

<script src=script.js></script> 

这意味着它似乎无法访问请求生成代码。

这就是我在 server.js 中的内容：

const http2 = require('http2');
const fs = require('fs');
const path = require('path');

const options = {
    key: fs.readFileSync(path.join(__dirname, 'server.key')),
    cert: fs.readFileSync(path.join(__dirname, 'server.cert'))
};
const server = http2.createSecureServer(options, (req, res) => {
    const filePath = path.join(__dirname, '../client', 'index.html');

    fs.readFile(filePath, 'utf-8', (err, data) => {
        if (err) {
            res.statusCode = 500;
            res.end('Internal Server Error');
            return;
        }

        res.setHeader('Content-Type', 'text/html');
        res.end(data);
    });
});

server.listen(3000, () => {
    console.log('Server running on https://localhost:3000');
});

我对 http2 进程及其工作原理的了解非常有限，所以我不明白为什么我尝试过的代码不允许它正常运行。我最好的猜测是我目前尝试实现服务器的方式是严格使用静态方法，并且在加载 script.js 后无法对其进行任何更新？

我不太确定如何确保我的服务器能够正常运行。我已经验证了客户端工作正常，现在我的问题只是弄清楚如何正确地让服务器托管。

Answer 1

您需要向 server.js 添加代码以正确提供 .js 文件（即使用

'内容类型'，'文本/javascript'

）当他们被要求时。

例如，像这样更改你的 server.js 文件：

const http2 = require('http2');
const fs = require('fs');
const path = require('path');

const options = {
    key: fs.readFileSync(path.join(__dirname, 'server.key')),
    cert: fs.readFileSync(path.join(__dirname, 'server.cert'))
};
const server = http2.createSecureServer(options, (req, res) => {
  if( req.url == "/"  || req.url == "index.html" )  sendHtml( res, "index.html" )
  else if( req.url.endsWith( ".js" ) ) sendJs( res, req.url )
} )


function sendHtml( res, filename ) {
  const filePath = path.join( __dirname, filename );

  fs.readFile( filePath, (error, data) => {
    if( error ) {
      res.statusCode = 500;
      res.write( `Error reading: ${filePath}` );
      res.end( error.toString() );
    }
    else {
      res.setHeader( 'Content-Type', 'text/html' );
      res.end( data );
    }
  } )
}


function sendJs( res, filename ) {
  const filePath = path.join( __dirname, filename );

  fs.readFile( filePath, (error, data) => {
    if( error ) {
      res.statusCode = 500;
      res.write( `Error reading: ${filePath}` );
      res.end( error.toString() );
    }
    else {
      res.setHeader( 'Content-Type', 'text/javascript' );
      res.end( data );
    }
  } )
}