axios.get("/abc/def");
axios.get("/abc/ghi");
axios.post("/abc/jkm");

devServer: {
? ? proxy: {
? ? ? "/abc": {
? ? ? ? target: "http://XX.XX.XX.XX:8081",
? ? ? ? changeOrigin: true,
? ? ? ? ws: true,
? ? ? ? secure: false,
? ? ? },
? ? },
},

devServer: {
? ? proxy: {
? ? ? ? "/zzz": {
? ? ? ? ? target: "http://XX.XX.XX.XX:8082",
? ? ? ? ? changeOrigin: true,
? ? ? ? ? ws: true,
? ? ? ? },
? ? ? ? "/xxx": {
? ? ? ? ? target: "http://XX.XX.XX.XX:8083",
? ? ? ? ? changeOrigin: true,
? ? ? ? ? ws: true,
? ? ? ? },
? ? },
},

// 一般在全局設置里引入，例如main.js，方便第二行的配置被每一個axios請求識別
import axios from "axios";
// 只要發(fā)送axios請求，就在請求前加入/api的開頭，例如 /zzz/one -> /api/zzz/one
axios.defaults.baseURL = "/api"; ? ?

devServer: {
? ? proxy: {
? ? ? ? "/api": {
? ? ? ? ? ? target: "http://XX.XX.XX.XX:8084",
? ? ? ? ? ? changeOrigin: true,
? ? ? ? ? ? ws: true,
? ? ? ? ? ? pathRewrite: {
? ? ? ? ? ? ? "^/api": "",
? ? ? ? ? ? },
? ? ? ? },
? ? },
},

?module.exports = {
? ? ?devServer: {
? ? ? ? ? ? ?proxy: 'http://localhost:5000',
? ? ?}
?}

//開啟代理服務器(方法二)
? ? devServer: {
? ? ? ? proxy: {
? ? ? ? ? ? // ?'/yu'為請求前綴，用于控制是不是走代理，想走代理時就在請求前綴前邊加上這個請求前綴
? ? ? ? ? ? '/yu': {
? ? ? ? ? ? ? ? target: 'http://localhost:5000',
? ? ? ? ? ? ? ? pathRewrite: { "^/yu": "" }, //重寫路徑 ?匹配以/yu為開頭的路徑都變?yōu)榭兆址?
? ? ? ? ? ? ? ? ws: true, //用于支持websocket
? ? ? ? ? ? ? ? changeOrigin: true //用于控制請求頭中的host值
? ? ? ? ? ? },
? ? ? ? ? ? '/demo': {
? ? ? ? ? ? ? ? target: 'http://localhost:5001',
? ? ? ? ? ? ? ? pathRewrite: { "^/demo": "" },
? ? ? ? ? ? ? ? ws: true, //用于支持websocket
? ? ? ? ? ? ? ? changeOrigin: true //用于控制請求頭中的host值
? ? ? ? ? ? },
? ? ? ? }
? ? }

getStudents() {
? ? ? axios.get("http://localhost:8081/yu/students").then(
? ? ? ? (response) => {
? ? ? ? ? console.log("請求成功了", response.data);
? ? ? ? },
? ? ? ? (error) => {
? ? ? ? ? console.log("請求失敗了", error.message);
? ? ? ? }
? ? ? );
? ? },
? ? getCars() {
? ? ? axios.get("http://localhost:8081/demo/cars").then(
? ? ? ? (response) => {
? ? ? ? ? console.log("請求成功了", response.data);
? ? ? ? },
? ? ? ? (error) => {
? ? ? ? ? console.log("請求失敗了", error.message);
? ? ? ? }
? ? ? );
? ? },

// node自帶路徑工具.
var path = require('path')
// 分為兩種環(huán)境，dev和production
module.exports = {
? dev: {
? ? // 配置好后一定要關閉原來的server，重新npm run dev啟動項目。不然無效。
? ? proxyTable: { ? // 需要代理的接口，可以跨域
? ? ? // 用‘/api'開頭，代理所有請求到目標服務器
? ? ? '/api': {
? ? ? ? ? ? target: 'http:xxx.com', // 目標接口域名
? ? ? ? ? ? changeOrigin: true, // 是否啟用跨域
? ? ? ? ? ? pathRewrite: { //這里要理解成用'/api'代替target里面的地址，后面的組件中我們調用接口的時候直接用api代替，比如我要調用'http://40.00.100:3002/user/add'，直接寫成'/api/user/add'即可
? ? ? ? ? ? ? '^/api': '' ?// 即/api相當于http://40.00.100:3002
? ? ? ? ? ? }
? ? ? ? }
? ? ?}
? }
}

module.exports = {
? ? // cli3 代理是從指定的target后面開始匹配的，不是任意位置；配置pathRewrite可以做替換
? ? devServer: {
? ? ? proxy: {
? ? ? ? '/yourapi': { ? //代理api，/yourapi的意義在于，聲明axios中url已/api開頭的請求都適用于該規(guī)則，注意是以/yourapi開頭，即：axios.post({url: '/yourapi/xxx/xxx'})
? ? ? ? ? target: 'yourserver', ? //服務器真實api地址，即需要請求的目標接口，此處target的意義在于：造成跨域是因為訪問的host與我們的請求頭里的origin不一致，所以我們要設置成一致，這個具體請看下文
? ? ? ? ? changeOrigin: true, ? ?//是否跨域，true為開啟代理：在本地會創(chuàng)建一個虛擬服務端，然后發(fā)送請求的數(shù)據(jù)，并同時接收請求的數(shù)據(jù)，這樣服務端和服務端進行數(shù)據(jù)的交互就不會有跨域問題
? ? ? ? ? ws: true, // 是否啟用websockets，根據(jù)實際情況看是否需要配置該項
? ? ? ? ? pathRewrite: {?
? ? ? ? ? ? ? ?'^/yourapi': 'https://我是服務器/api' ? //重寫路徑
? ? ? ? // 此處是大部分文章都不會明說的的地方，
? ? ? ? // 既然我們設置了代理，則所有請求url都已寫成/yourapi/xxx/xxx，那請求如何知道我們到底請求的是哪個服務器的數(shù)據(jù)呢
? ? ? ? // 因此這里的意義在于， 以 /yourapi開頭的url請求，代理都會知道實際上應該請求那里，
? ? ? ? // ‘我是服務器/yourapi'，后面的/api根據(jù)實際請求地址決定，即我的請求url：/yourapi/test/test，被代理后請求的則是
? ? ? ? // https://我是服務器/yourapi/test/test
? ? ? ? ? }?
? ? ? ? }
? ? ? }
? ? }
? }