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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 微商分销代理商城源码带代理等级和升级条件 thinkphp框架「建议收藏」

    微商分销代理商城源码带代理等级和升级条件 thinkphp框架「建议收藏」  介绍:微商分销代理商城源码基于think框架开发是一款微商分销代理商城源码,可以自己设置代理等级和升级条件(如购买指定商品、消费额度)网站搭建方式介绍:测试环境php7.0+mysql5.6数据库配置文件applicationdatabase.php后台/admin用户:admin密码:123456下载链接:thinkphp框架微商分销代理商城源码-代理等级和升级条件…

  • 共享打印机无法连接打印,错误代码0x0000011b_打印机共享错误0x000001

    共享打印机无法连接打印,错误代码0x0000011b_打印机共享错误0x000001WIndows无法连接共享打印机,错误码:0x0000011bWin10电脑1直连的打印机,设备了共享。从另一个电脑2访问电脑1的共享打印机,连接提示错误0x0000011b,如下:经询问使用人,之前电脑2是可以正常连接到电脑1的共享打印机的,只是最近几天突然连接失败了。后得知电脑1最近有更新过系统补丁。经排查,通过卸载KB5005565补丁,重启电脑1后,电脑2成功连接到共享打印机,测试打印正常。处理过程:1.打开控制面板-程序-程序和功能-已安装更新。找到对应的KB5005565补丁,右

  • sftp特定端口连接「建议收藏」

    sftp特定端口连接「建议收藏」默认走22端口如果需要修改端口号sftp-oPort=55288root@192.168.0.254使用-o选项来指定端口号.-oPort=远程端口号

  • 微型计算机的主要因素,微型计算机的性能主要取决于( )。

    微型计算机的主要因素,微型计算机的性能主要取决于( )。【单选题】运用移动平均线研判股价趋势时,股价在一段时间下跌后,若短期均线开始上翘,继而穿越长期均线,形成:【单选题】在完成高度保密和紧急任务时往往不适用的领导方式是()【判断题】汽油和柴油发动机的负荷特性区别在于调节方式不同,汽油机属于质调节,柴油机属于量调节【判断题】为了让烙铁头充分接触焊点,焊接时可适当施加压力。【单选题】按构成空间视线限制的方向性可将植物构成空间分为水平空间和()…

  • 服务器如何存储图片(图片服务器搭建方案)

    参考:https://www.zhihu.com/question/20518854我们的ext4/dev/sda37299235847亿多个inode了。数据库直接存图片本身是SB的做法。比较好的方法是存图片md5,然后通过类似md52url获取图片的地址。至于图片存放,建议打散,打3级或5级。类似a/de/df/adedf***************.jpg…

  • jar包如何防止反编译_jar包可以反编译成源码吗

    jar包如何防止反编译_jar包可以反编译成源码吗方法就是,向Jar注入无效代码(不合法的,或者根本不是代码的字符串)。那么无效的代码又怎么能正确运行呢?答案就是,你要保证你的代码永远不会执行到那一步。我作一个简单的例子说明:我们建立一个项目:packagecom.TestJar;publicclassMain{ publicstaticvoidmain(String[]args){ System.out.println(Info.g…

    2022年10月31日

发表回复

您的电子邮箱地址不会被公开。

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