Express托管React构建文件跨域及静态资源加载失败问题求解

问题初始状态 #

初始Express服务可正常加载test.html页面，初始配置如下：

const express = require("express");
const helmet = require("helmet")
const bodyParser = require("body-parser")
const http = require("http")
const cors = require("cors")
const { Worker, workerData } = require("worker_threads")
const fs = require("fs");

const port = 80
const app = express();
app.use(helmet());
app.use(cors());

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))


const server = http.createServer(app);


app.get("/", async (req, res) => {
    res.sendFile(__dirname + "/test.html")
})

server.listen(port, () => {
    console.log("Server listening on port " + port)
})

此时浏览器控制台存在两类警告：

1. Cross-Origin-Opener-Policy头被忽略，原因是当前URL源不可信，该头在最终响应或重定向中被定义，建议使用HTTPS协议传输响应，或改用'localhost'源访问；
2. 页面通过Origin-Agent-Cluster头请求源键控代理集群失败，因'http://xxxxxxxxxx'源此前已被放入站点键控代理集群，需对该源下所有页面统一配置源键控规则。

配置修改后的异常 #

新增express.static("build")托管React构建产物目录，同时将根路由响应修改为返回build目录下的index.html，修改后配置如下：

const express = require("express");
const helmet = require("helmet")
const bodyParser = require("body-parser")
const http = require("http")
const cors = require("cors")
const { Worker, workerData } = require("worker_threads")
const fs = require("fs");

const port = 80
const app = express();
app.use(helmet());
app.use(cors());

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))

// 新增静态资源托管
app.use(express.static("build"))

const server = http.createServer(app);

// 修改根路由响应
app.get("/", async (req, res) => {
    res.sendFile(__dirname + "/build/index.html")
})

server.listen(port, () => {
    console.log("Server listening on port " + port)
})

修改后React页面无法加载，判定为JS、CSS等静态资源加载异常导致，express.static()未按预期生效。控制台除原有两类警告外，新增静态资源请求报错：

• GET https://xxxxxxxxxx/static/css/main.073c9b0a.css net::ERR_CONNECTION_CLOSED
• GET https://xxxxxxxx/static/js/main.d36b2a27.js net::ERR_CONNECTION_CLOSED

排查与解决思路 #

按优先级从高到低逐次排查：

• 修正静态资源路径配置：express.static()传入相对路径时，路径是相对于Node进程的启动工作目录，而非当前执行的JS文件所在目录，极易出现路径匹配失败。需引入Node内置path模块，将静态资源托管配置改为绝对路径：

  const path = require("path")
  // 其余配置不变
  app.use(express.static(path.join(__dirname, "build")))
  

  配置完成后express.static会默认返回build目录下的index.html，无需额外编写根路由响应；如果要兼容React前端路由，需在所有接口、静态资源配置的最后添加通配符路由，避免拦截静态资源请求。
• 排查协议与端口不匹配问题：当前服务仅监听80端口（HTTP默认端口），但报错中的静态资源请求均为https://开头（HTTPS协议默认端口为443），服务未配置HTTPS证书、未监听443端口时，HTTPS请求会直接被拒，触发ERR_CONNECTION_CLOSED错误。可先检查React构建配置：如果项目package.json中配置了带HTTPS前缀的homepage字段，构建后的静态资源引用路径会自动带HTTPS前缀，需修正为相对路径或正确的服务地址；如果需要对外提供HTTPS服务，需给服务配置合法SSL证书并增加443端口监听。如果服务外层有Nginx等反向代理，需检查代理规则是否存在强制HTTPS跳转、静态资源请求未正确转发到Node服务端口的问题。
• 本地连通性验证：在服务器本地执行curl命令直接请求静态资源地址，例如curl http://127.0.0.1/static/js/main.d36b2a27.js，如果能正常返回JS文件内容，说明问题出在外层网络、协议匹配或反向代理配置；如果请求返回404或连接错误，说明静态资源路径配置错误，需核对build目录的实际存放位置、Node进程启动目录是否符合预期。
• 中间件顺序校验：Express中间件按注册顺序匹配执行，需确保express.static中间件的注册顺序在所有可能拦截/static路径请求的路由、自定义中间件之前，避免静态资源请求被其他逻辑提前拦截。
• Helmet安全策略适配：初始的两类安全头警告是Helmet默认注入的严格安全策略与HTTP非可信源不匹配导致，在HTTPS配置完成前，可根据实际场景调整Helmet的COOP、Origin-Agent-Cluster相关配置，避免安全策略异常阻断静态资源响应。

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