前端vue 页面需要增加访问另一个后台项目的一个接口, 修改核心内容如下 正式环境需要后台配置nginx vue.config.js 这个是原本的代理地址 process.env.VUE_APP_BASE_API 是.env.development 和.env.production 配置的, 比如打包后这个值是 '/prod-api' 会在访问后端的接口上 追加上 '/prod-api' ， 追加一般是在axios.create 方法的baseURL 配置的 例: 后台给的接口是系统管理微服务的用户列表接口 /system/user/list 最终打包后访问的是 /prod-api/system/user/list , 这个/prod-api 是用来在nginx 进行转发的, 这个地址下直接转发后台服务器上。 明白了这个就好弄了， 由于我们只需要调用一个外部接口, 则直接axios.post 在接口方法前面加上 /自己定义-api 如 /wb-api, 再proxy 进行代理 开发环境(dev)代理的配置 ``` proxy: { // 发现 /dev-api 则代理到 target 的服务器地址上 [process.env.VUE_APP_BASE_API]: { target: `后端接口`, changeOrigin: true, pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: '' } }, ['/wb-api']: { target: `后端接口`, changeOrigin: true, pathRewrite: { ['^/wb-api']: '' } }, }, ``` 调用方法 1. 方法较多, 增加通用配置requestWb 在原来的request 请求工具类, 增加此项目的请求配置, 如果需要配置其他的, 也可以复制一份原来的request进行修改, 核心是修改 baseURL, 这里是在原来的request里增加一个变量, 这个 ~~~ export const requestWb = axios.create({ // axios中请求配置有baseURL选项，表示请求URL公共部分 baseURL: '/wb-api', // 超时 timeout: 40000 }) ~~~ ~~~ import {requestWb } from '@/utils/request' 这里不需要再带上 /wb-api 前缀了, 在 requestWb 里拼接上了 export function getList(query) { return requestWb({ url: '接口地址', method: 'get', params: query }) } ~~~ 2. 如果方法少, 也可以直接用axios ~~~ axios.get('/wb-api/接口地址',{参数}).then(res=> { }) ~~~ 正式环境 在nginx中的原 server 进行增加配置 主要是根据路径, 将 wb-api 的转发到新的那个后台服务器上 ``` location /wb-api/ { proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass 后台服务器地址; #升级http1.1到 websocket协议 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; } ```