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'

该方法的优点：在项目打包时，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                                
                })             
            }
          }
        );

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

在Vue3中实现四种全局状态数据的统一管理的方法
在开发中,通常遇到四种全局状态数据:异步数据、同步数据,传统的Vue3使用不同机制处理这些数据,而Zova框架通过Model机制来统一管理,简化了数据处理流程,提高了代码的可维护性,本文介绍在Vue3中实现四种全局状态数据的统一管理的方法,感兴趣的朋友一起看看吧
2024-10-10
vue修改数据视图更新原理学习
这篇文章主要为大家介绍了vue修改数据视图更新原理学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-11-11
很棒的vue弹窗组件
这篇文章主要为大家详细介绍了vue弹窗组件的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
Ant Design Vue 走马灯实现单页多张图片轮播效果
这篇文章主要介绍了Ant Design Vue 走马灯实现单页多张图片轮播,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-07-07
vscode jsconfig.json 使用简介
通过jsconfig.json文件定义一个JavaScript项目,目录中是否存在此类文件表示该目录是JavaScript项目的根目录,文件本身可以选择列出属于项目的文件,要从项目中排除的文件以及编译器选项,这篇文章主要介绍了vscode jsconfig.json 使用说明,需要的朋友可以参考下
2023-09-09
el-tree设置选中高亮/焦点高亮、选中节点加深背景及更改字体颜色等的方法
el-tree默认有较浅的背景色,这里业务需要,选中节点的字体高亮,更改颜色,下面这篇文章主要给大家介绍了关于el-tree选中高亮/焦点高亮、选中节点加深背景及更改字体颜色等的设置方法,需要的朋友可以参考下
2022-12-12
vue利用插件实现按比例切割图片
这篇文章主要为大家详细介绍了vue利用插件实现按比例切割图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
vue中tab选项卡的实现思路
今天给大家分享vue中tab 选项卡的一些套路，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-11-11
vue渲染方式render和template的区别
这篇文章主要介绍了vue渲染方式render和template的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
vue使用Swiper踩坑解决避坑
这篇文章主要为大家介绍了vue使用Swiper踩坑及解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05