Node.js/Express web应用首次请求CSS加载失败，第二次请求恢复正常

问题解决方案 #

核心原因 #

你遇到的提交后重定向CSS加载失败、刷新正常的问题，90%以上是重定向路径使用相对路径，导致浏览器基于表单提交路由的层级解析CSS路径，请求到错误的资源地址。
比如你的表单提交到/admin/add-product路由，如果你在该路由的处理逻辑中写的是res.redirect('shop')（相对路径，不带/开头），浏览器会认为你要重定向到/admin/shop，此时页面资源路径会被拼接为/admin/css/main.css，资源不存在自然加载失败；刷新时地址栏为正确的根路径下的商品页地址，CSS路径解析正确就能正常加载。 #

修复步骤 #

1. 优先修改重定向逻辑，使用绝对路径重定向
   找到你表单提交路由的重定向代码，将相对路径改为以/开头的绝对路径，示例：

// 错误写法（相对路径）
res.redirect('shop')
// 正确写法（绝对路径，对应你展示商品的路由路径）
res.redirect('/')

2. 确认静态资源中间件配置正确
   确保Express静态资源中间件注册在所有路由之前，且目录路径匹配你的项目结构：

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

// 放在所有路由注册之前，假设你的css文件放在项目根目录的public/css下
app.use(express.static(path.join(__dirname, 'public')))

3. 可选：加base标签固定路径解析基准
   如果需要进一步避免路径解析问题，可以在EJS模板的head标签中添加base标签，强制所有资源路径基于根路径解析：

<head>
    <base href="/">
    <meta charset="UTF-8">
    <!-- 剩余的meta、title、CSS引入代码保持不变 -->
</head>

4. 确认JSON写入操作异步逻辑正确
   如果你用的是异步API写入JSON文件（比如fs.writeFile），确保在写入完成的回调中执行重定向，避免文件读写未完成就返回响应导致的异常：

// 示例写入JSON后再重定向
fs.writeFile('product.json', JSON.stringify(products), err => {
  if(err) console.log(err)
  res.redirect('/') // 写入完成后再重定向
})

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