使用Express.js加载静态文件失败，报Not allowed to load local resource错误

问题根源 #

1. 路径转义错误：Windows系统下的反斜杠\在JavaScript字符串中是转义字符，直接写"D:\Testing\Chat app(Amber Light)\Public"会导致路径解析异常，Express无法正确定位静态资源目录。
2. 资源引用方式错误：HTML中若直接使用本地文件路径（如file:///D:/xxx/style.css），浏览器会因安全限制拒绝加载，必须通过Express提供的/static路由访问资源。

修复步骤 #

1. 修正静态资源路径 #

推荐使用path模块处理路径（跨平台兼容），避免转义问题：

const express = require('express');
const path = require('path'); // 引入path模块
const bodyParser = require('body-parser')

const app = express();

// 用path.resolve处理绝对路径，避免转义异常
app.use('/static', express.static(path.resolve("D:\\Testing\\Chat app(Amber Light)\\Public")));

// 若Public目录在项目根目录下，更推荐相对路径写法：
// app.use('/static', express.static(path.join(__dirname, 'Public')));

app.get("/", function(req,res){
  res.sendFile(path.join(__dirname, 'index.html')); // 同样用path处理HTML文件路径
  console.log(req.rawHeaders);
})

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

2. 修正HTML中的资源引用 #

确保HTML里的CSS/JS通过/static路由访问，示例：

<!-- 正确写法 -->
<link rel="stylesheet" href="/static/style.css">
<script src="/static/main.js"></script>

<!-- 错误写法（会触发Not allowed错误） -->
<!-- <link rel="stylesheet" href="file:///D:/Testing/Chat app(Amber Light)/Public/style.css"> -->

3. 验证配置有效性 #

启动服务后，在浏览器访问http://localhost:3000/static/style.css，若能正常显示CSS内容，说明静态资源配置已生效。

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