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                                
                })             
            }
          }
        );

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

相关文章

  • vue获取当前点击的元素并传值的实例

    vue获取当前点击的元素并传值的实例

    下面小编就为大家分享一篇vue获取当前点击的元素并传值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 利用Vue实现移动端图片轮播组件的方法实例

    利用Vue实现移动端图片轮播组件的方法实例

    轮播图是前端很常用的一个网页特效,几乎所有的网站或多或少都会用到这个特效。下面这篇文章主要给大家介绍了关于利用Vue实现移动端图片轮播组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。
    2017-08-08
  • Vue.js与Flask/Django后端配合方式

    Vue.js与Flask/Django后端配合方式

    在现代Web开发中,Vue.js与Flask或Django配合使用,实现前后端分离,提高开发效率和应用性能,本文介绍了整合Vue.js和Flask/Django的步骤,包括环境搭建、API编写、项目配置,以及生产部署,此架构不仅加快了开发进程,还提高了项目的可维护性和可扩展性
    2024-09-09
  • Vue.js实现的表格增加删除demo示例

    Vue.js实现的表格增加删除demo示例

    这篇文章主要介绍了Vue.js实现的表格增加删除demo,结合实例形式分析了vue.js数据绑定及元素增加、删除等相关操作技巧,需要的朋友可以参考下
    2018-05-05
  • Vue项目全局配置页面缓存之按需读取缓存的实现详解

    Vue项目全局配置页面缓存之按需读取缓存的实现详解

    这篇文章主要给大家介绍了关于Vue项目全局配置页面缓存之实现按需读取缓存的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧
    2018-08-08
  • Vue 事件的$event参数=事件的值案例

    Vue 事件的$event参数=事件的值案例

    这篇文章主要介绍了Vue 事件的$event参数=事件的值案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2021-01-01
  • vue devtools的安装与使用教程

    vue devtools的安装与使用教程

    vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率,这篇文章主要介绍了vue devtools的安装与使用教程,需要的朋友可以参考下
    2018-08-08
  • vue-cli axios请求方式及跨域处理问题

    vue-cli axios请求方式及跨域处理问题

    这篇文章主要介绍了vue-cli axios请求方式及跨域处理问题,文中还给大家提到了vue中axios解决跨域问题和拦截器使用,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2018-03-03
  • vue3中reactive和ref函数及对比分析

    vue3中reactive和ref函数及对比分析

    这篇文章主要介绍了vue3中reactive和ref函数及对比,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-01-01
  • Vue3使用dayjs以及dayjs日期工具类详解

    Vue3使用dayjs以及dayjs日期工具类详解

    这篇文章主要介绍了Vue3使用dayjs以及dayjs日期工具类,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论