想将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. 获取浏览器当前请求头中自带的原始 referer
          const originalReferer = req.headers['referer']
          
          if (originalReferer) {
            // 2. 使用 replace 方法，将字符串中的 'localhost' 替换为你的目标 IP
            // 假设你想替换为 192.168.1.100
            const 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）即可生效。