首页 > 我的文章 > Nuxt.js配置proxy实用详解

Nuxt.js配置proxy实用详解

Nuxt.js proxy
发表于 2018-12-26,已被查看 576 次,已被评论 0 次

什么是proxy?

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

 

为什么要配置proxy?

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

 

如何配置proxy?

1、安装@nuxtjs/proxy依赖包

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中的哪部分?见图如下:

url path

 

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

举个例子:

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

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

 

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

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

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

 

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

 

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

评论列表

这篇文章还没有评论,来抢个沙发吧~

发表评论

昵称
邮箱
QQ
内容