vue配置多代理服务接口地址操作

一、介绍

随着微服务架构的流行，后台项目逐渐被拆分成不同的模块进行通信，但是前端还是只有一个项目所以在访问不同模块后台时，需要请求不同的地址，在vue项目中，通过配置代理可以进行后端服务器接口地址访问，当需要访问不同微服务的后端接口时就需要配置不同的地址。

二、代码

config/index.js文件中配置代理地址：

自己项目中定义所有接口api管理文件src/api/getData.js：

页面调用接口时xxx.vue

三、总结

1、vue使用配置多代理地址方式可以访问不同的项目地址，使用以上方法。

2、同时也是可以把所有接口通过一个统一的后台项目通过feign调用其他系统接口进行访问，使用该种方式只需要配置一个代理地址即可，同时也可以对所有接口调用进行监控，比如添加用户操作记录时就比较简单，只需要定义一个aop切面监控conroller中的方法即可。

补充知识：Vue解决跨域多个target问题（配置多个代理问题）

我就废话不多说了，大家还是直接看代码吧~

 devServer: {
 	publicPath: process.env.NODE_ENV === 'production'? '/production-sub-path/': '/',
  proxy: {
  	//可以配置多个代理
   '/api': {
    target: 'http://192.168.0.201:9994',
    changeOrigin: true,
    ws: true,
    pathRewrite: {
     '^/api': ''
    }
   },
   '/images': {
    target: 'http://baidu.com',
    changeOrigin: true,
    ws: true,
    pathRewrite: {
     '^/images': ''
    }
   }
  }
 },

以上这篇vue配置多代理服务接口地址操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue2.0设置proxyTable使用axios进行跨域请求的方法

    vue2.0设置proxyTable使用axios进行跨域请求的方法

    这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址. 在vue-cli构建的项目中先安装axios npm install axios -S 这里暂不考虑用vuex封装的方式,只讲在当前组件中直接使用. 先在<script>中引入 用prototype将axios添加为vue原生的属性,$ajax相当于axios的别名. 然后在要调用的方法或是钩子中请求,$ajax就是上面注册的axios,如果想直接用axios不想设置prototype也可以直接按官方的

  • Vue多环境代理配置方法思路详解

    背景: 多人协作模式下,修改代理比较麻烦,而且很容易某个开发人员会修改了vue.config.js文件后提交了. 第一,很容易引起冲突. 第二,很容易出现代理错误,需要排查.而且现在微服务盛行,在生产环境下有网关配置,不会出错,但是在本地调试会造成麻烦,如修改了代理地址需要同步修改代理中的地址,很麻烦也很容易出错. 解决思路: 1.开发中定义常量js文件,例如constants.js.用户存放各个服务需要代理的服务名. let api = "" let loginServer = &q

  • Vue项目配置跨域访问和代理proxy设置方式

    在vue单页应用项目开发时,避免不了要请求后端,这时通常就会出现跨域问题.有2种常用的解决方案 后端设置允许跨域访问 前端通过代理进行访问后端 下面我们只说说如何配置vue-cli代理访问: vue-cli代理 最简单就是配置vue conifg进行实现 下面配置3个请求的后端,分别是: 请求http://localhost:4201/adminapi/*会代理请求http://localhost:8180/* 请求http://localhost:4201/portalapi/*会代理请求ht

  • vue配置多代理服务接口地址操作

    一.介绍 随着微服务架构的流行,后台项目逐渐被拆分成不同的模块进行通信,但是前端还是只有一个项目所以在访问不同模块后台时,需要请求不同的地址,在vue项目中,通过配置代理可以进行后端服务器接口地址访问,当需要访问不同微服务的后端接口时就需要配置不同的地址. 二.代码 config/index.js文件中配置代理地址: 自己项目中定义所有接口api管理文件src/api/getData.js: 页面调用接口时xxx.vue 三.总结 1.vue使用配置多代理地址方式可以访问不同的项目地址,使用以上

  • vue axios 给生产环境和发布环境配置不同的接口地址(推荐)

    本项目是vue-cli搭建的项目框架,引入axios用于数据请求.配置不同的接口地址,(首先确保已经集成了axios,如对集成axios有疑问的道友,可参看我之间的一篇vue-cli 引入axios)操作如下 一.设置不同的接口地址 找到如下文件 /config/dev.env.js /config/prod.env.js 之后增加接口地址域名配置,增加后的文件内容如下 二.在自己重新封装的axios文件中(api/api.js),将配置好的接口地址作为baseURL拼接到接口路径中 详细的ap

  • Vue proxyTable配置多个接口地址,解决跨域的问题

    最开始的时候,因为请求后台出现跨域问题. 查找资料配置proxyTable,解决跨域问题.如下图所示: axios请求页面: this.$axios.post('/api/weblogin/login',data).then(res=>{ console.log(res) }) 后面遇到需要连接不同的接口域名,我在proxyTable里增加了一个apiGas.axios请求存在获取得到api但是不能获取apiGas(提示请求资源不存在). proxyTable: { '/api': { targ

  • 详解vue+axios给开发环境和生产环境配置不同的接口地址

    为什么要配置不同的接口地址 在开发过程中,前端请求访问的是自己本机启动的后台服务,此时涉及到跨域(因为端口不一样),所以在config/index.js文件中配置了代理 //检查某个文件是否存在 try { fs.statSync(path.join(__dirname, '../proxy/' + templatedir + '.json')) //如果可以执行到这里那么就表示存在了 console.log(124) proxyTable = require('../proxy/' + tem

  • vue设置全局访问接口API地址操作

    在使用vue框架进行前后端分离项目开发时,通常涉及到与后段接口进行交互,平时一般使用比较多的就是用axios来实现调用后段接口,写法一般为 xxx() { const _this = this axios.get("http://ip:port/xx/xx").then(function (resp) { .....//省略 }) } 但是有一个比较普遍的问题就是,假如我们后端接口地址改变了,或者是网络地址发生了变化,就需要在上面IP以及端口的位置每一处都需要修改,所以我们需要一个一处

  • vue 导出文件,携带请求头token操作

    前言 本文并不能直接复制到本地看效果,仅提供代码参考 1.使用axios的方式携带请求头token 2.设置响应的数据类型 responseType: "blob" 3.请求成功,返回二进制文件的数据回来 4.请求失败,返回json 5.示例代码 <template> <div> <el-button type="primary" size="small" :loading="btnLoading"

  • Vue项目打包后可修改基础接口地址配置的具体操作

    Vue项目打包后可修改基础接口地址配置的具体操作

    目录 一.目的 二.具体操作实现 总结 一.目的 最近在学习或工作中遇到,把 Vue 前端项目打包后,要求可以再次修改请求后端接口的基础地址.平常开发中在 Vue 项目中使用 axios 时把请求后端接口的基础地址写在了 baseURL 里. 这样子打包后如果要改图里红框处的地址,要么去打包编译后的文件堆里一个个搜索(如果项目不小的话,这文件堆可不少...),找到后直接改,要么在源码里改完后重新再打包部署,这两种做法都显得有些麻烦,且维护性也不好. 所以本文用一种较好的方案来解决以上问题,通过创

  • 如何修改Vue打包后文件的接口地址配置的方法

    1.背景 常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是对应的生产环境的地址,不是唯一的.如果每次都修改一个地址,再打包文件进行部署,过程繁琐且低效.那么如何把环境地址设置成可配置的,不需要再构建代码就能直接生效呢? 2.可选方案 进行了调研后,网上介绍的方案有2种: 1)在static上设置一个config.js,把配置的参数设置成 window 下的

  • webpack+vue-cil 中proxyTable配置接口地址代理操作

    在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包的时候,我们在本地启动服务器后,比如本地开发服务下是 http://localhost:8080 这样的访问页面,但是我们的接口地址是 http://xxxx.com/save/index 这样的接口地址,我们这样直接使用会存在跨域的请求,导致接口请求不成功,因此我们需要在打包的时候配置一下,我们进入 config/index.js 代码下如下配置即可: dev: {

  • vue axios封装httpjs,接口公用配置拦截操作

    做一下记录,在vue项目中配置公用的请求https, (1) 位置,在src中新建 src/utils/http.js import axios from 'axios' // 引用axios import { MessageBox, Message } from 'element-ui' import Qs from 'qs' //引入数据格式化 import router from '@/router' // axios 配置 axios.defaults.timeout = 50000 /

随机推荐