vue跨域處理方式(vue項(xiàng)目中baseUrl設(shè)置問題)

更新時(shí)間：2022年05月25日 14:12:47 作者：zcm629

這篇文章主要介紹了vue跨域處理方式(vue項(xiàng)目中baseUrl設(shè)置問題)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue跨域處理(baseUrl設(shè)置問題)

一、方法一

在公用文件common.js中設(shè)置baseUrl

export var baseUrl = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : '/api'

該方法的優(yōu)點(diǎn)：在項(xiàng)目打包時(shí)，static下面的文件是不會(huì)被webpack處理的，所以可以通過改變static下config.js中的值，更改服務(wù)器地址。

在main.js中設(shè)置全局的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默認(rèn)是 json 格式提交,確認(rèn)后臺是否做了對應(yīng)的支持;若是只能接受傳統(tǒng)的表單序列化,就需要自己寫一個(gè)轉(zhuǎn)義的方法，或者用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)境：

在單個(gè)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))
}

注意：在有的編輯器中，會(huì)報(bào)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":{?? ??? ?//設(shè)置第一代理
? ? ? ? ? ? target: 'http://192.168.105.42:9090',?? ?
?? ??? ??? ?//secure:false,?? ??? ??? ??? ??? ?//如果是https接口，需要配置這個(gè)參數(shù)
? ? ? ? ? ? changeOrigin: true,?? ??? ??? ?//如果接口跨域需要配置這個(gè)參數(shù)
? ? ? ? ? ? pathRewrite: {
? ? ? ? ? ? ? ? '^/api': '/'?? ??? ?
? ? ? ? ? ? }
? ? ? ?},
? ? ? ?
? ? ? ?'/navy':{ // 設(shè)置第二個(gè)代理
? ? ? ? ?? ?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?? ??? ??? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ?})?? ? ? ? ?? ?
?? ??? ??? ?}
?? ? ? ? ?}
?? ? ? ?);

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: