OpenVPN防护下NuxtJS前端axios代理请求访问被拒问题

一、VPN与Nuxt代理的工作机制 #

• OpenVPN属于网络层访问控制方案：用户设备连入指定VPN后，会和VPN网关建立加密传输隧道，设备会被分配VPN内网专属IP，只有来源IP在VPN可信网段内的请求，才会被访问管控策略放行，当前配置的「必须连VPN才能访问前端」的规则，就是在CloudFront侧校验请求来源IP是否属于VPN出口网段实现的。
• Nuxt配置文件中的proxy规则属于应用层反向代理逻辑：该能力依赖Nuxt自带的Node服务运行，匹配到规则指定路径前缀的请求时，会被Node服务中间件拦截，由Node服务代替请求发起方向配置的target地址发送真实请求，过程中按规则重写请求路径、修改请求头，拿到目标服务响应后再返回给请求方，设计初衷是解决本地开发跨域、多环境接口地址统一适配的问题。

二、当前场景下代理请求的发起侧 #

你当前生产环境的所有/api请求均由用户浏览器（客户端侧）直接发起，配置的proxy规则在生产环境完全未生效，原因如下：

1. 项目未启用SSR，且前端是纯静态资源托管在AWS CloudFront上。CloudFront是静态内容分发服务，不具备运行Node服务的能力，proxy规则仅在Nuxt启动Node服务的场景下生效（比如本地执行nuxt dev开发、启动SSR服务执行nuxt start），执行静态构建命令nuxt generate输出的纯静态文件中，不会打包任何代理中间件逻辑。
2. 能在浏览器控制台网络面板中看到/api开头的请求记录，可直接佐证代理未生效：如果代理在服务端侧正常运行，接口请求会由服务端内部完成转发，浏览器侧根本不会捕获到/api路径的请求记录。

访问报错的直接原因 #

本地开发时这套配置能正常运行，是因为本地开发环境启动了Node服务，代理逻辑在本地开发机上生效；生产环境静态部署后代理失效，浏览器直接向CloudFront同域下的/api路径发起请求，而CloudFront未配置该路径的转发规则，同时VPN的访问管控仅放通了前端静态资源的访问权限，未对API路径的请求做对应放通，最终返回访问被拒的错误。

当前nuxt.config.js中配置的代理规则如下：

{
  ...,

  proxy: {
    '/api/': {
      target: !process.env.FLAVOR
        ? 'http://localhost:8009'
        : (process.env.FLAVOR === 'production'
            ? 'https://api.domain.tld'
            : 'https://' + process.env.FLAVOR + '-api.domain.tld'),
      pathRewrite: { '^/api/': '/v1/' }
    }
  },

  ...
}

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