如何通过Express路由提供脚本文件作为HTML的src资源

你现在的/widget路由用res.send()返回的是文件路径字符串，浏览器拿到这个文本后只会把它当成普通内容处理，并不会自动去加载这个路径对应的JS文件——这就是为什么直接访问路由能看到路径，但script标签引用后无法正常工作的原因。

下面给你两种可行的解决方案：

方案1：用res.sendFile()直接返回JS文件内容 #

这是最直接的方式，让Express读取你的JS文件并把文件内容作为响应返回给浏览器，这样script标签就能接收到正确的JS代码并执行了。修改你的路由代码如下：

const path = require('path');

app.get("/widget", (req, res) => {
  // 拼接出JS文件的绝对路径
  const targetJsPath = path.join(__dirname, "/src/client/public/bundle.js");
  
  // 发送文件内容，同时处理可能的错误
  res.sendFile(targetJsPath, (err) => {
    if (err) {
      res.status(err.status || 500).send('Failed to load widget script');
    }
  });
});

修改后，当你访问http://localhost:2222/widget时，浏览器会直接收到bundle.js的代码内容，你的script标签就能正常加载执行了。

方案2：用express.static托管静态文件（更推荐） #

如果你的bundle.js属于静态资源，用Express的express.static中间件来托管静态目录会更高效简洁，这也是Express处理静态文件的标准方式。

步骤1：配置静态文件中间件 #

在你的Express代码中添加以下配置：

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

// 托管静态文件目录，这里把src/client/public下的文件映射到/static路径下
app.use('/static', express.static(path.join(__dirname, 'src/client/public')));

步骤2：直接使用静态路径或路由重定向 #

• 你可以直接让script标签引用静态文件路径：

<script src="http://localhost:2222/static/bundle.js" type="text/javascript"></script>

• 如果你想保持/widget的路由不变，可以做一个重定向：

app.get("/widget", (req, res) => {
  res.redirect('/static/bundle.js');
});

这样访问/widget时，浏览器会自动跳转到静态文件的路径，同样能正常加载JS。

额外注意事项 #

• 可以用console.log(targetJsPath)打印拼接后的路径，确认它确实指向了你的bundle.js文件，避免路径错误导致的404。
• 既然你已经配置好CORS相关的头部，跨域加载的问题就不用额外担心了。

内容的提问来源于stack exchange，提问作者Umair Jameel