Vue中的反向代理

更新時間：2023年01月23日 13:03:13 作者：呱呱?.?

這篇文章主要介紹了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請求

// 導入axios
import axios from 'axios'
axios.get('/api/v1/home/getIndexInfo').then(function(res){
? ? ? ? ? console.log(res);
});

Vue反向代理相關(guān)概念及配置

反向代理使用場景

在前后端分離開發(fā)的場景，前端有個服務器（提供靜態(tài)頁面），后端有個服務器（提供接口）

此時，前端需要連接后端的接口，就會出現(xiàn)跨域問題

在發(fā)布環(huán)境中，如果存在跨域問題，使用nginx

如果前后端代碼在一個服務器，不存在跨域問題

跨域的解決方案

jsonp（前端解決方案）
CORS（后端解決方案）：cross origin resource sharing
反向代理（前端解決方案）

什么是反向代理

反向代理隱藏真實的服務端，讓瀏覽器依然是同源

反向代理原理

通過偽造請求使得http請求為同源的，然后將同源的請求發(fā)送到反向代理服務器上，由反向代理服務器去請求真正的url，這樣就繞過直接請求真正的url導致的跨域問題

反向代理的配置

vue-cli3的反向代理

在項目根目錄下新建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：