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


相关推荐

  • 净推荐值(NPS):用户忠诚度测量的基本原理及方法

    净推荐值(NPS):用户忠诚度测量的基本原理及方法文章分享了一个衡量用户与产品或服务之间关系的指标:NPS,干货满满,希望对你有益。初识NPS作为互联网行业的用户体验从业者,我们都或多或少会接触一些衡量用户与产品或服务之间关系的指标,常见的指标如活跃度、留存率、用户满意度等。近几年,NPS(NetPromoterScore净推荐值)在国内流行起来,越来越多的行业及企业开始使用NPS指标作为衡量用户口碑的工具,如通信服务行业的中国移…

    2022年6月14日
    100
  • Mac PHPStorm清除SVN配置缓存

    Mac PHPStorm清除SVN配置缓存

    2021年10月21日
    37
  • 关于java的外语文献_java英文参考文献(涵盖3年最新120个)

    关于java的外语文献_java英文参考文献(涵盖3年最新120个)近年来,随着我国科学的技术的飞速发展,计算机语言的内容和形式得到了极大的丰富,特别是java语言的广泛应用,它不仅是计算机语言的重要组成部分,同时也是我国程序编写的重要内容之一,java语言的出现和广泛使用,极大的丰富了人们的生产,生活,为人们的工作和学习提供了很大的便利.下面是搜素整理的java英文参考文献的分享,供大家借鉴参考。java英文参考文献一:[1]AbbasMrAnsar,Eli…

    2022年9月30日
    0
  • 动态迁移_动作迁移

    动态迁移_动作迁移概念在虚拟化环境中的迁移,又分为动态迁移,静态迁移,也有人称之为冷迁移和热迁移,或者离线迁移在线迁移;静态迁移和动态迁移的区别就是静态迁移明显有一段时间客户机的服务不可用,而动态迁移则没有明显的服务暂停时间,静态迁移有两种1,是关闭客户机将其硬板镜像复制到另一台宿主机系统,然后回复启动起来,这种迁移不保留工作负载,2是,两台客户机公用一个存储系统,关闭一台客户机,防止其内存到另一台宿主机,这样做的

    2022年10月25日
    0
  • 页面加载时给的子元素的第一个元素加class

    页面加载时给的子元素的第一个元素加class

    2021年11月3日
    43
  • 自监督:对比学习contrastive learning「建议收藏」

    自监督:对比学习contrastive learning「建议收藏」对比自监督学习英文原文对比自监督学习导读利用数据本身为算法提供监督。对比自监督学习技术是一种很有前途的方法,它通过学习对使两种事物相似或不同的东西进行编码来构建表示。自监督方法将取代深度学习中占主导地位的直接监督范式的预言已经存在了相当一段时间。AlyoshaEfros打了一个著名的赌,赌在2015年秋季之前,一种无监督的方法将会在检测PascalVOC方面胜过有监督的R-CNN。但四年之后,他的预言现在已经实现了。目前,自监督方法(MoCo,Heetal.,2019)在Pasc

    2022年9月14日
    0

发表回复

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

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