前端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; } ```