vue axios跨域问题的三种解决方案_vue如何实现跨域

vue axios跨域问题的三种解决方案_vue如何实现跨域vue3项目,axios跨域处理,代理

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

vue3为例:

  • 【vue.config.js】文件,目录里面没有的话需要真机创建

    代理的它通俗意思:我这里设置api意思就是在遇到于/api开始的接口的时候,间本地地址转化为接口地址

    如:http://localhost:8080/api 等价于 http://123.123.122.166:3101

module.exports = {
  devServer: {
    proxy: {
      '/api': {       
        // 目标的路径
        target: 'http://123.123.122.166:3101',  //也就是接口地址
        // 允许跨域
        changeOrigin: true,
        // 重写跨域
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}
  • 在main.js的axios调用接口的时候

    //这个是我采用了开发时和发布时的环境设置
    //方法1
    const BASEURL = process.env.NODE_ENV === 'production' ? '' : '/api' 
    let instance = axios.create({
      baseURL: BASEURL,
      timeout: 30000,
      withCredentials: true
    })
    ​
    // 如果你们不需要搞开发时还是发布时就这样
    //方法2:
    let instance = axios.create({
      baseURL: '/api',   //这里就是vue.config.js文件里面设置的代理 /api
      timeout: 30000,
      withCredentials: true
    })
    
    //或者
    axios.defaults.baseURL = "/api";

  • 使用的时候

methods:{
    async addClick(){
        let {data:res} = await this.$http.get('/user/mobileLogin',{params:{userName:this.userName,passWord:this.passWord}})
    }
}

vue axios跨域问题的三种解决方案_vue如何实现跨域

请求的网络如上图,前部分 http://localhost:8080/api 会在浏览器内部等价于 http://123.123.122.166:3101 接口地址,使用实际上的请求是 http://123.123.122.166:3101/user/mobileLogin?userName=admin&password=123456

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/197309.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • C#常用 API函数大全[通俗易懂]

    C#常用 API函数大全[通俗易懂]常用WindowsAPI1.API之网络函数WNetAddConnection创建同一个网络资源的永久性连接WNetAddConnection2创建同一个网络资源的连接WNetAddConnection3创建同一个网络资源的连接WNetCancelConnection结束一个网络连接WNetCancelConnection2结束一个网络连接WNetCloseEn

    2025年6月25日
    5
  • java中Collections.sort排序详解[通俗易懂]

    java中Collections.sort排序详解[通俗易懂]Comparator是个接口,可重写compare()及equals()这两个方法,用于比价功能;如果是null的话,就是使用元素的默认顺序,如a,b,c,d,e,f,g,就是a,b,c,d,e,f,g这样,当然数字也是这样的。compare(a,b)方法:根据第一个参数小于、等于或大于第二个参数分别返回负整数、零或正整数。equals(obj)方法:仅当指定的对象也是一个Compara

    2022年7月12日
    20
  • 深入理解无锁编程「建议收藏」

    深入理解无锁编程「建议收藏」hi,大伙好,今天介绍一下无锁编程基础知识,希望大家可以了解无锁编程基本原理。无锁编程是一个挑战,不仅因为任务本身的复杂性,还因为从一开始就很难深入了解这个主题,因为该主题和底层技术(编译…

    2022年6月10日
    31
  • powermodule_getsocketopt

    powermodule_getsocketopt严格模式ES6的模块自动采用严格模式,不管你有没有在模块头部加上"usestrict";。严格模式的限制如下变量必须声明后再使用函数的参数不能有同名属性,否则报错不能

    2022年7月30日
    5
  • js 正则替换换行符

    js 正则替换换行符vardiv=document.getElementById(‘div’);vars=div.innerHTML.replace(/(\n|\r|(\r\n)|(\u0085)|(\u2028)|(\u2029))/g,””);//g的意思是:执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。//取消了空格之后在做其他的替换才可以,否则不能替换

    2022年5月24日
    137
  • 【C语言】判断一个字符串是否为回文字符串。[通俗易懂]

    【C语言】判断一个字符串是否为回文字符串。[通俗易懂]2.判断一个字符串是否为回文字符串。#includeintmain(void){chara[100];inti=0,j=0;printf(“Pleaseinputstring:”);gets_s(a,100);while(a[i]!=’\0′)i++;i–;for(;j{if(a[i]!=a[j])

    2022年5月3日
    48

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号