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,
? ? ? ? },
? ? },
},

// 一般在全局設(shè)置里引入，例如main.js，方便第二行的配置被每一個(gè)axios請(qǐng)求識(shí)別
import axios from "axios";
// 只要發(fā)送axios請(qǐng)求，就在請(qǐng)求前加入/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',
? ? ?}
?}

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

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

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

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