Vue中的反向代理
Vue反向代理
config下面的index.js文件
const ios = require('./os');
module.exports = {
? dev: {
? ? // Paths
? ? assetsSubDirectory: 'static',
? ? assetsPublicPath: '/',
? ? proxyTable: {
? ? ? '/api': {
? ? ? ? target: 'http://192.168.0.127:8890', // 跨域地址
? ? ? ? changeOrigin: true, //是否跨域
? ? ? ? secure: false //是否使用https
? ? ? }
? ? },
? ? host: {ip: ios.ip, org: 'linkName.com'}, /*localhost,192.168.0.37*/
? ? port: 2019, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
? ? autoOpenBrowser: true,
? ? errorOverlay: true,
? ? notifyOnErrors: false,
? ? poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
? ? // Use Eslint Loader?
? ? useEslint: false,
? ? // If true, eslint errors and warnings will also be shown in the error overlay
? ? // in the browser.
? ? showEslintErrorsInOverlay: false,
? ? devtool: '#cheap-source-map', //‘inline-source-map'
? ? cacheBusting: true,
? ? cssSourceMap: false,
? }
}ios 文件
const interfaces = require('os').networkInterfaces();
let IPAdress = '';
for(let devName in interfaces){
? let iface = interfaces[devName];
? for(let i=0;i<iface.length;i++){
? ? let alias = iface[i];
? ? if(alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal){
? ? ? IPAdress = alias.address;
? ? }
? }
}
module.exports = { ip : IPAdress }API請求
// 導(dǎo)入axios
import axios from 'axios'
axios.get('/api/v1/home/getIndexInfo').then(function(res){
? ? ? ? ? console.log(res);
});Vue反向代理相關(guān)概念及配置
反向代理使用場景
在前后端分離開發(fā)的場景,前端有個(gè)服務(wù)器(提供靜態(tài)頁面),后端有個(gè)服務(wù)器(提供接口)
此時(shí),前端需要連接后端的接口,就會(huì)出現(xiàn)跨域問題
在發(fā)布環(huán)境中,如果存在跨域問題,使用nginx
如果前后端代碼在一個(gè)服務(wù)器,不存在跨域問題
跨域的解決方案
- jsonp(前端解決方案)
- CORS(后端解決方案):cross origin resource sharing
- 反向代理(前端解決方案)
什么是反向代理
反向代理隱藏真實(shí)的服務(wù)端,讓瀏覽器依然是同源
反向代理原理
通過偽造請求使得http請求為同源的,然后將同源的請求發(fā)送到反向代理服務(wù)器上,由反向代理服務(wù)器去請求真正的url,這樣就繞過直接請求真正的url導(dǎo)致的跨域問題
反向代理的配置
vue-cli3的反向代理
在項(xiàng)目根目錄下新建vue.config.js文件
配置代碼:
module.exports = {
? lintOnSave:false,
? devServer:{
? ? proxy: {?
? ? ? '/api': {?
? ? ? target: 'http://localhost:80',
? ? ? changeOrigin: true,?
? ? ? pathRewrite: {
? '^/api': "" ??
},
?'/apidouban': {
? ? ? target: 'http://localhost:3001',
? ? ? changeOrigin: true,?
? ? ? pathRewrite: {
? '^/apidouban': ""
}
? ?}
? ? ? }
? ?}
}反向代理執(zhí)行過程:
axios訪問地址中的 /api 轉(zhuǎn)換為 target + /api:
(eg:http:localhost:9000/api/goods 轉(zhuǎn)換為 http://localhost:80/api/goods)
創(chuàng)建虛擬服務(wù)器
去掉/api:
(eg:http://localhost:80/goods)
總結(jié)
頁面axios請求時(shí)請求與頁面url一樣的地址,地址后面拼接api,反向代理服務(wù)器會(huì)將請求地址中/api之前的地址轉(zhuǎn)變?yōu)閠arget中的地址,這樣一來在頁面發(fā)生請求時(shí)瀏覽器會(huì)認(rèn)為是同源,不會(huì)報(bào)錯(cuò);
有時(shí)候一個(gè)頁面服務(wù)器可能會(huì)請求好幾個(gè)后端服務(wù)器,這時(shí),反向代理可以設(shè)置多個(gè),/api這個(gè)名字也是自定義的
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue函數(shù)式組件的應(yīng)用實(shí)例詳解
這篇文章主要介紹了Vue函數(shù)式組件的應(yīng)用實(shí)例詳解,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
Vue3+Ant?design?實(shí)現(xiàn)Select下拉框一鍵全選/清空功能
在做后臺(tái)管理系統(tǒng)項(xiàng)目的時(shí)候,產(chǎn)品增加了一個(gè)在Select選擇器中添加一鍵全選和清空的功能,他又不讓在外部增加按鈕,其實(shí)如果說在外部增加按鈕實(shí)現(xiàn)全選或者清空的話,功能比較簡單的,下面給大家分享Vue3+Ant?design?實(shí)現(xiàn)Select下拉框一鍵全選/清空功能,需要的朋友可以參考下2024-05-05
vue.js自定義組件directives的實(shí)例代碼
這篇文章主要介紹了vue.js自定義組件directives的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
vue實(shí)現(xiàn)點(diǎn)擊翻轉(zhuǎn)效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)點(diǎn)擊翻轉(zhuǎn)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-07-07
Vue開發(fā)環(huán)境中修改端口號(hào)的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue開發(fā)環(huán)境中修改端口號(hào)的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
利用Vue Router實(shí)現(xiàn)單頁面應(yīng)用(SPA)的代碼示例
在當(dāng)今前端開發(fā)中,單頁面應(yīng)用(SPA)已成為一種主流的開發(fā)模式,它通過在用戶與網(wǎng)頁之間提供更流暢的交互體驗(yàn),來改變傳統(tǒng)多頁面應(yīng)用的思維,本文將詳細(xì)介紹如何利用 Vue.js 中的 Vue Router 來實(shí)現(xiàn)一個(gè)簡單的單頁面應(yīng)用,需要的朋友可以參考下2025-01-01

