本文详细解析Vue项目中解决跨域问题的三种主流方案。涵盖通过common.js动态设置baseUrl、利用axios实例封装接口，以及配置webpack proxyTable进行多域名代理的方法。重点讲解开发环境与生产环境下的不同配置策略，以及qs库在参数序列化中的应用，帮助开发者高效处理前后端分离架构中的接口调用问题。
Vue跨域处理（baseUrl设置问题）
一、方法一
在公用文件common.js中设置baseUrl
export var baseUrl = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : '/api'该方法的优点在于：项目打包时，static目录下的文件不会被webpack处理，因此可以通过修改static目录下config.js中的值来更改服务器地址。
在main.js中设置全局的axios配置
import axios from 'axios'
import {baseUrl} from '@/assets/js/common.js'
axios.defaults.baseURL= baseUrl在api_message.js中声明调用接口的方法
import qs from 'qs'
export function messagelist (params = {}) {
return axios.post('/event/list.do', qs.stringify(params))
}注意：此处引入qs的原因
axios默认以JSON格式提交数据，需确认后台是否支持该格式；若后台仅接受传统的表单序列化，则需要自行编写转义方法，或者使用qs依赖库。
组件中调用
import {messagelist} from '@/assets/js/api_message.js'
export default {
name: 'ShopList',
components: { Item },
data() {
return {
list: []
}
},
methods: {
getList() {
let listdata = {
limit: 8,
offset: 0,
statueType: this.statueType,
condition: this.condition
}
messagelist(listdata).then(response => {
if (response.data.length > 0) {
this.list = response.data
}
}).catch(error => {
console.debug(error)
})
}
}
}二、方法二
开发环境：
生产环境：
在单个js中声明接口
import axios from 'axios'
import qs from 'qs'
const instance = axios.create({
baseURL: baseUrl
})
export function login (params = {}) {
return instance.post('/duty/login', qs.stringify(params))
}注意：在某些编辑器中，可能会提示baseUrl未声明，但这不影响实际使用。
三、方法三
开发环境
生产环境
在文件中使用
import axios from 'axios'
import qs from 'qs'
const instance = axios.create({
baseURL: process.env.API
})vue请求不同的域名，baseURL配置
1、index.js
proxyTable: { //解决跨域问题
"/api":{ //设置第一代理
target: 'http://192.168.105.42:9090',
//secure:false, //如果是https接口，需要配置这个参数
changeOrigin: true, //如果接口跨域需要配置这个参数
pathRewrite: {
'^/api': '/'
}
},
'/navy':{ // 设置第二个代理
target: "http://192.168.105.42:9095",
changeOrigin: true,
pathRewrite: {
'^/navy': '/'
}
},
},2、main.js
axios.defaults.baseM1URL= "/api";
axios.defaults.baseM2URL= "/navy";
//对get请求传递过来的参数处理
function paramsToUrl(url, params) {
if (!params) return url
for (var key in params) {
if (params[key] && params[key] != 'undefined') {
if (url.indexOf('?') != -1) {
url += '&' + '' + key + '=' + params[key] || '' + ''
} else {
url += '?' + '' + key + '=' + params[key] || '' + ''
}
}
}
return url
}
function requireData(url,params,type,item){
if(!url) return false
switch(item){
case 'M1':
url=axios.defaults.baseM1URL+url
break;
case 'M2':
url=axios.defaults.baseM2URL+url
break;
default:
url=axios.defaults.baseM4URL+url
}
if(type==='get'){
url=paramsToUrl(url, params)
return new Promise((resolve,reject)=>{
Axios.get(url,params).then(res=>{
resolve(res.data)
}).catch(err=>{
reject(err)
})
})
}else{
return new Promise((resolve,reject)=>{
Axios.post(url,params).then(res=>{
resolve(res.data)
}).catch(err=>{
reject(err)
})
})
}
}
//->接口1的请求数据方法 IP地址为：http://192.168.105.42:9090调该方法
Vue.prototype.reqM1Service=function(url,params,type){
return requireData.call(this,url,params,type,'M1')
}
//->接口2的请求数据方法 IP地址为：http://192.168.105.42:9095调该方法
Vue.prototype.reqM2Service=function(url,params,type){
return requireData.call(this,url,params,type,'M2')
}3、mine.vue
this.reqM1Service('/bsApi/Home/AddUserFeedback', params).then(
res => {
if(res.status == 200){
_this.$toast.success({
message: '提交成功',
forbidClick: true,
duration:1000
})
}
}
);以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。