一. 配置代理 - vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
// 配置代理服务器
devServer: {
proxy: {
'/baidu': {
target: 'https://baidu.com',
// ws: true, // 用于支持websocket
changeOrigin: true, // 用于控制请求头中的host值
pathRewrite: {
'^/baidu': ''
}
},
// 配置更多代理...
}
}
})
由上面代码可知 配置一个 /baidu 的代理 , 当匹配到 /baidu ，会跳转到目标target https://baidu.com
二. 封装axios.js
目录： utils/axios.js
因为axios的baseUrl 配置 会影响vue.config.js中配置的代理，可能会使其失效。所以需要根据url 来对baseURL做处理。如果是代理路径，则baseURL设置为空
import axios from 'axios' // 导入axios
/**
* 当前路径是否为需要代理的路径
* @param {*} url
* @returns
*/
function currentUrlIsProxy(url) {
const proxyArr = ['baidu','代理路径2','代理路径3'] // 需要代理的路径数组 - 即vue.config.js 中配置的代理路径集合
const activeProxy = proxyArr.find(proxyItem => url.indexOf(proxyItem) !== -1)
return activeProxy ? true : false
}
/**
* axios请求
* @param {*} method
* @param {*} url
* @param {*} params
* @param {*} headers
* @returns
*/
export function apiAxios (method, url, params, headers) {
var httpDefault = {
baseURL: currentUrlIsProxy(url) ? '' : process.env.VUE_APP_BASE_URL,//基本地址
method: method,//请求的方法
url: url,//接口地址
params: method === 'GET' || method === 'DELETE' ? params : null,//get请求和delete请求参数在url地址后面，不在请求体当中
data: method === 'POST' || method === 'PUT' ? params : null,//put请求，post请求参数在请求体当中
headers:headers?Object.assign({}, axios.defaults.headers,headers):axios.default.headers,//判断接口有没有定制的请求头，与基本的请求头进行合并
}
return new Promise((resolve, reject) => {
axios(httpDefault)
.then((res) => {
resolve(res)
}).catch((response) => {
reject(response)
// this.$message.error('请求失败！')
})
})
}
三.main.js 使封装的axios.js 可以全局使用
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { apiAxios } from './utils/axios' // 导入
Vue.config.productionTip = false
Vue.prototype.$http = apiAxios // 全局配置
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
四.使用
使用组件的.vue
<template>
<div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
mounted() {
this.$http('get','/login_register_index',{request_time: '1663311028554'}).then(() => {
// 这里的baseUrl 为 https://market.idcsmart.com
// 这里实际请求的是 https://market.idcsmart.com/login_register_index
}).catch(error => {
console.log(error)
})
this.$http('get','/baidu/login_register_index',{request_time: '1663311028554'}).then(() => {
// 匹配到 代理路径 /baidu
// 这里实际请求的是 https://www.baidu.com/login_register_index 说明代理配置成功！
}).catch(error => {
console.log(error)
})
}
}
</script>
<style>
</style>