目的：為了解決前端和后端聯(lián)調(diào)數(shù)據(jù)，出現(xiàn)的跨域問題,通過配置反向代理谦疾，可以更好的聯(lián)調(diào)數(shù)據(jù)
常見跨域場景
(1)同一域名，不同端口
http://www.demo.com:8000/a.js
http://www.demo.com/b.js
(2)同一域名犬金，不同協(xié)議
http://www.demo.com/a.js
https://www.demo.com/b.js
(3)域名和域名對應(yīng)相同ip
http://www.demo.com/a.js
http://127.0.0.1/b.js
(4)不同域名
http://www.demo1.com/a.js
http://www.demo2.com/b.js
前端常用解決方案
(1)通過jsonp跨域：只能發(fā)get請求念恍，數(shù)據(jù)量不能超過4K
(2)跨域資源共享（CORS）:需服務(wù)端設(shè)置Access-Control-Allow-Origin即可六剥，前端無須設(shè)置，若要帶cookie請求：前后端都需要設(shè)
(3)反向代理:在瀏覽器中創(chuàng)建了代理服務(wù)器峰伙，缺點(diǎn)渲染效率降低
配置反向代理
//vue-cli3.0 里面的 vue.config.js做配置
const url = 'http://192.168.0.111:9999' //服務(wù)器端接口地址
module.exports = {
//...
devServer: {
proxy: {
'/api': { //這里最好有一個 /
target: url, // 服務(wù)器端接口地址
ws: true, //如果要代理 websockets疗疟，配置這個參數(shù)
secure: false, // 如果是https接口，需要配置這個參數(shù)
changeOrigin: true, //是否跨域
pathRewrite:{'^/api':''}
}
}
}
};
此時訪問的接口地址在本地被解析為localhost:8080/api/***
訪問的真實(shí)地址是http://192.168.0.111:9999***
正向代理隱藏真實(shí)客戶端地址瞳氓，反向代理則隱藏真實(shí)服務(wù)端地址
詳情
在http://192.168.0.111:9999上有后端服務(wù)的話策彤，你可以這樣啟用代理：
module.exports = {
//...
devServer: {
proxy: {
'/api': 'http://192.168.0.111:9999'
}
}
};
請求到/api/users現(xiàn)在會被代理到請求http://192.168.0.111:9999/api/users。
如果你不想始終傳遞 /api 匣摘，則需要重寫路徑：
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://192.168.0.111:9999',
pathRewrite: {'^/api' : ''}
}
}
}
};
默認(rèn)情況下店诗，不接受運(yùn)行在HTTPS上，且使用了無效證書的后端服務(wù)器音榜。如果你想要接受庞瘸，修改配置如下：
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'https://other-server.example.com',
secure: false
}
}
}
};
如果你想要代理多個路徑特定到同一個 target 下，你可以使用由一個或多個「具有 context 屬性的對象」構(gòu)成的數(shù)組：
module.exports = {
//...
devServer: {
proxy: [{
context: ['/auth', '/api'],
target: 'http://192.168.0.111:9999',
}]
}
};
