HX-Push-Url响应头无法修改客户端URL及浏览器历史问题求助

问题出在CORS配置未暴露自定义响应头。你使用了cors中间件，但默认情况下浏览器会限制前端脚本访问非标准响应头，htmx无法读取到HX-Push-Url，自然无法更新地址栏。

修改服务端CORS配置 #

更新Express的cors设置，添加exposedHeaders选项，明确允许暴露htmx所需的自定义响应头：

import express from "express";
import cors from "cors";
var app = express()

// 配置CORS，暴露htmx相关的自定义响应头
app.use(cors({
  exposedHeaders: ['Hx-Push-Url', 'Hx-Replace-Url']
}))

const port = 3030;

app.get('/', (req, res) => {
    res.set('Hx-Push-Url', '/new-page');
    res.send(`
    <div>
        <text>hello, world</text>
    </div>
  `);
});

app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
})

原因说明 #

跨域请求时，浏览器遵循同源策略，默认仅允许前端访问标准响应头（如Content-Type）。要让htmx能读取HX-Push-Url这类自定义响应头，必须通过Access-Control-Expose-Headers响应头指定允许暴露的字段。

客户端使用hx-push-url属性能生效，是因为该逻辑在客户端直接处理，不需要读取跨域响应头，因此不受CORS限制。

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