想将vue-cli开发环境中的请求头中的 referer中的localhost替换为ip,其他referer中的内容不变

如果你只想把 Referer 里的 localhost 精准替换为指定的 IP 地址，而保留后面的端口、路径等其余内容不变，可以在 devServer 的 onProxyReq 钩子中利用 JavaScript 的字符串替换方法来实现。

具体配置如下：

// vue.config.js
module.exports = {devServer: {proxy: {'/api': {target: 'http://后端真实IP:端口',changeOrigin: true,onProxyReq: (proxyReq, req, res) => {// 1. 获取浏览器当前请求头中自带的原始 refererconst originalReferer = req.headers['referer']if (originalReferer) {// 2. 使用 replace 方法，将字符串中的 'localhost' 替换为你的目标 IP// 假设你想替换为 192.168.1.100const newReferer = originalReferer.replace('localhost', '192.168.1.100')// 3. 将处理好的新 referer 设置到转发给后端的请求头中proxyReq.setHeader('referer', newReferer)}}}}}
}

原理说明：

• req.headers['referer'] 会拿到浏览器发出的完整 Referer 地址（例如 http://localhost:8080/some/path）。
• 通过 replace('localhost', '192.168.1.100')，它会精准地把前面的 localhost 换成 IP，而保留后面的 :8080/some/path 等所有字符不变。
• 最后通过 proxyReq.setHeader 覆盖掉原来的值，这样后端接收到的 Referer 就变成了你想要的 IP 格式。

修改完配置后，记得重启开发服务器（npm run serve）即可生效。