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文件如下:

1
2
3
4
5
6
module.exports = {
axios: {
// @nuxtjs/axios模块中已内置了proxy支持,此处开启即可。
proxy: true
}
}

3、配置proxy,修改nuxt.config.js如下:

1
2
3
4
5
6
7
8
9
10
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文档