Nuxt使用@nuxtjs/proxy时动态设置Axios的origin头不生效如何解决

• SSR场景下，@nuxtjs/proxy 运行在Nuxt服务端中间件层，你在axios拦截器中添加的请求头，默认不会被proxy透传给上游目标接口。@nuxtjs/proxy 底层依赖的http-proxy-middleware优先使用proxy配置中定义的headers，你移除配置中的origin头后，proxy不会主动携带该字段。
• 纯客户端请求场景下，浏览器的跨域安全策略会自动覆盖你在axios中手动设置的origin头，手动配置不会生效。

不需要通过axios拦截器设置origin，直接修改nuxt.config.js中的proxy配置，通过onProxyReq钩子动态设置请求头即可：

// nuxt.config.js
proxy: {
  '/api/': {
    target: 'api.example.com',
    pathRewrite: {
      '^/api/': ''
    },
    // 新增代理请求钩子，转发前动态设置origin
    onProxyReq(proxyReq, req) {
      // 从当前访问的请求对象中取origin，不存在就用host拼接
      const dynamicOrigin = req.headers.origin || `https://${req.headers.host}`
      proxyReq.setHeader('origin', dynamicOrigin)
    }
  },
}

设置完成后删除之前新增的plugins/origin.js插件即可。该方案可以同时兼容SSR和客户端请求场景，动态取当前访问域名生成对应的origin头，不会被拦截或者覆盖。

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