Nuxt.js配置proxy实用详解

什么是 proxy？

顾名思义，proxy 就是代理。代理又分为正向代理和反向代理。通常在 Nuxt.js 项目中使用的是正向代理。

为什么要配置 proxy？

主要目的是解决跨域问题。当在开发环境中配置 proxy 时，ajax 跨域请求无需服务端支持便能正常进行，方便开发和测试；当在生产环境中配置 proxy 时，可以作为前后端分离开发模式下，获取数据的中间件，同时也能方便调用第三方 Web API。

如何配置 proxy？

1、安装@nuxtjs/proxy 依赖包

1	npm install –save—dev @nuxtjs/proxy

注：如果仅作为开发环境依赖，则使用—save-dev 选项；如果需要作为生产环境依赖，则应使用—save 选项。

2、启用 proxy，修改 nuxt.config.js 文件如下：

module.exports = {
  axios: {
    // @nuxtjs/axios模块中已内置了proxy支持，此处开启即可。
    proxy: true,
  },
};

3、配置 proxy，修改 nuxt.config.js 如下：

module.exports = {
  proxy: {
    '/api': {
      target: 'http://100.102.234.212:8001',
      pathRewrite: {
        '^/api': '', // 删除url中的/api
      },
    },
  },
};

proxy 配置详解

‘/api’表示匹配请求 url 中的 path 部分，并且 path 部分以’/api’开头。

path 是 url 中的哪部分？见图如下：

target 表示要代理请求的服务器地址。

举个例子：

假设 Nuxt.js 运行地址为 localhost:3000，根据上面代码中 proxy 配置，当请求/api/users 时，

从请求 localhost:3000/api/users 代理到 100.102.234.212:8001/api/users

pathRewrite 定义 url 中 path 的重写规则。

在实际应用中，当我们请求/api/users 时，其实是想对应实际接口/users，这时 pathRewrite 就派上用场了。以上代码中 pathRewrite 配置使我们请求/api/users 时，删除/api 前缀，即：

从请求 localhost:3000/api/users 代理到 100.102.234.212:8001/users

小提示：实际应用中，根据上面的配置，每一个实际请求我们都需要手动加上/api 前缀，既麻烦又不能直观对应真实接口，此时，可在配置 axios 中加上 prefix:’/api’即可解决这个问题。

更多的配置选项参考：http-proxy-middleware 文档。