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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 10个常用的3D建模软件,作为3D建模的软件东西很杂很碎,还需多练习才最重要「建议收藏」

    10个常用的3D建模软件,作为3D建模的软件东西很杂很碎,还需多练习才最重要「建议收藏」很多人都会好奇,电脑是怎么将手绘的2D图形变成3D的实际物品的?究竟是什么神奇魔法能够瞬间将我们的想法变成现实的呢?今天来和大家介绍下工业设计师经常会用到的10个3D建模软件。SolidworksSolidworks是工业设计师经常会用到的一款建模软件。SolidWorks是一款在MircosoftWindows上才能运行的建模计算机辅助设计和计算机辅助工程的计算机程序,由DassaultSystemes开发和发布。这是一款很常见的很普遍的工业设计建模软件,如果你以后有机会在国外找工

    2022年5月12日
    70
  • map转map_java获取map的值

    map转map_java获取map的值String转map:Mapmap_new=newGson().fromJson(s,map.getClass());//需要引入jar包引用的jar<!–配置gson–><dependency><groupId>com.google.code.gson</groupId><artifactId>gson</artifactId><version>2.2.4</v.

    2022年9月10日
    0
  • Raid5磁盘阵列修复方法介绍「建议收藏」

    Raid5磁盘阵列修复方法介绍「建议收藏」  在RAID5中,数据条带化后存储在分布式奇偶校验的多个磁盘上。分布式奇偶校验的条带化意味着它将奇偶校验信息和条带化数据分布在多个磁盘上,这样会有很好的数据冗余。而有时候raid5磁盘阵列损坏,我们该如何修复呢?  1.若单个硬盘失效,尝试热插拔,即拔下来再插上去;如果不能解决,则进入RAID配置界面,将该硬盘进行ForceOnLine操作;如果不能解决,尝试更换-其它硬盘…

    2022年4月28日
    1.4K
  • 清除计算机垃圾cmd命令,cmd清理垃圾命令代码是什么

    清除计算机垃圾cmd命令,cmd清理垃圾命令代码是什么类型:系统其它大小:21.5M语言:中文评分:10.0标签:立即下载电脑用久了是会堆积一些系统垃圾的,这类垃圾不好清理,很多小伙伴选择使用cmd清理垃圾命令代码来清理,cmd清理垃圾命令代码是什么,西西小编来为大家介绍。cmd清理垃圾命令代码是什么使用方法:新建一个文本文档,然后复制代码进去,保存,把保存的文本文档,后缀名txt修改成bat,确定,然后双击运行,它就会自动帮你清理了。代码:@ec…

    2022年6月18日
    28
  • 振动分析软件有哪些_excel控件按钮怎么控制图表

    振动分析软件有哪些_excel控件按钮怎么控制图表LightningChart是优化了GPU加速,硬件性能的制图组件,用于实时呈现超过10亿个数据点的海量数据。同时LightningChart是为了处理实时数据采集和处理而开发的,可有效利用CPU和内存资源。LightningChart包括广泛的2D,高级3D,Polar,Smith,3D饼/甜甜圈,地理地图和GIS图表以及适用于科学,工程,医学,航空,贸易,能源和其他领域的体绘制功能。当您想到振动分析时,您会想到什么?它正在成为结构工程中一种非常常见的识别方法,用于识别潜在的结构完整性问题,例如隐藏的物

    2022年10月15日
    0

发表回复

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

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