vue跨域處理方式(vue項目中baseUrl設置問題)
更新時間：2022年05月25日 14:12:47 作者：zcm629
這篇文章主要介紹了vue跨域處理方式(vue項目中baseUrl設置問題)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue跨域處理(baseUrl設置問題)
一、方法一
在公用文件common.js中設置baseUrl
export var baseUrl = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : '/api'
該方法的優(yōu)點：在項目打包時，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中聲名調(diào)用接口的方法
import qs from 'qs'
?
export function messagelist (params = {}) {
? return axios.post('/event/list.do', qs.stringify(params))
}注意：此處引入qs的原因
axios默認是 json 格式提交,確認后臺是否做了對應的支持;若是只能接受傳統(tǒng)的表單序列化,就需要自己寫一個轉義的方法，或者用qs依賴。
組件中調(diào)用
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)
})
}
}
}二、方法二
開發(fā)環(huán)境：
生產(chǎn)環(huán)境：
在單個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未聲名，但是不影響使用
三、方法三
開發(fā)環(huán)境
生產(chǎn)環(huán)境
在文件中使用
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接口，需要配置這個參數(shù)
? ? ? ? ? ? changeOrigin: true,?? ??? ??? ?//如果接口跨域需要配置這個參數(shù)
? ? ? ? ? ? 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請求傳遞過來的參數(shù)處理
?? ?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的請求數(shù)據(jù)方法?? ??? ? IP地址為：http://192.168.105.42:9090調(diào)該方法
?? ??? ?Vue.prototype.reqM1Service=function(url,params,type){
?? ??? ??? ?return requireData.call(this,url,params,type,'M1')
?? ??? ?}
?? ?//->接口2的請求數(shù)據(jù)方法?? ??? ? IP地址為：http://192.168.105.42:9095調(diào)該方法
?? ??? ?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?? ??? ??? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ?})?? ? ? ? ?? ?
?? ??? ??? ?}
?? ? ? ? ?}
?? ? ? ?);以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
在Vue3中實現(xiàn)四種全局狀態(tài)數(shù)據(jù)的統(tǒng)一管理的方法
在開發(fā)中,通常遇到四種全局狀態(tài)數(shù)據(jù):異步數(shù)據(jù)、同步數(shù)據(jù),傳統(tǒng)的Vue3使用不同機制處理這些數(shù)據(jù),而Zova框架通過Model機制來統(tǒng)一管理,簡化了數(shù)據(jù)處理流程,提高了代碼的可維護性,本文介紹在Vue3中實現(xiàn)四種全局狀態(tài)數(shù)據(jù)的統(tǒng)一管理的方法,感興趣的朋友一起看看吧2024-10-10
這篇文章主要為大家介紹了vue修改數(shù)據(jù)視圖更新原理學習，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-11-11
這篇文章主要為大家詳細介紹了vue彈窗組件的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
Ant?Design?Vue?走馬燈實現(xiàn)單頁多張圖片輪播效果
這篇文章主要介紹了Ant?Design?Vue?走馬燈實現(xiàn)單頁多張圖片輪播,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
通過jsconfig.json文件定義一個JavaScript項目,目錄中是否存在此類文件表示該目錄是JavaScript項目的根目錄,文件本身可以選擇列出屬于項目的文件,要從項目中排除的文件以及編譯器選項,這篇文章主要介紹了vscode jsconfig.json 使用說明,需要的朋友可以參考下2023-09-09
el-tree設置選中高亮/焦點高亮、選中節(jié)點加深背景及更改字體顏色等的方法
el-tree默認有較淺的背景色,這里業(yè)務需要,選中節(jié)點的字體高亮,更改顏色,下面這篇文章主要給大家介紹了關于el-tree選中高亮/焦點高亮、選中節(jié)點加深背景及更改字體顏色等的設置方法,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了vue利用插件實現(xiàn)按比例切割圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
今天給大家分享vue中tab 選項卡的一些套路，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-11-11
這篇文章主要介紹了vue渲染方式render和template的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
這篇文章主要為大家介紹了vue使用Swiper踩坑及解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05