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


相关推荐

  • java中scanner的作用_Java中的Scanner类有什么作用[通俗易懂]

    java中scanner的作用_Java中的Scanner类有什么作用[通俗易懂]介绍:简单来说,Scanner就是用来获取用户在控制台输入的字符串,也可以获取一个文件中的字符串。java.util.Scanner是Java5的特征,一个可以使用正则表达式来解析基本类型和字符串的简单文本扫描器。使用方法介绍:1、使用不同的next方法将得到的标记转换为不同类型的值,比如说要从获控制台取一个输入字符串中的int类型的数字,使用nextInt。代码示例:Scanners…

    2022年7月20日
    14
  • Verilog 流水线设计[通俗易懂]

    Verilog 流水线设计[通俗易懂]一、什么是流水线流水线设计就是将组合逻辑系统地分割,并在各个部分(分级)之间插入寄存器,并暂存中间数据的方法。目的是将一个大操作分解成若干的小操作,每一步小操作的时间较小,所以能提高频率,各小操作能并行执行,所以能提高数据吞吐率(提高处理速度)。二、什么时候用流水线设计使用流水线一般是时序比较紧张,对电路工作频率较高的时候。典型情况如下:1)功能模块之间的流水线,用乒乓buffer来交互数据。代价是增加了memory的数量,但是和获得的巨大性能提升相比,可以忽略不计。2)I/O瓶

    2022年8月14日
    4
  • java实现http协议_java用http协议本地文件

    java实现http协议_java用http协议本地文件对于那些感兴趣的人,这是一个片段.我能够通过FluxLauncher而不是reactor-nettyUDP类来实现.privatestaticfinalStringSSDP_IP=”239.255.255.250″;privatestaticfinalintSSDP_PORT=1900;privatestaticfinalintTIMEOUT=500…

    2022年10月11日
    3
  • 常用的css文件_css常用的三种选择器

    常用的css文件_css常用的三种选择器reset.css(几乎每个项目都要引入的css)@charset"utf-8";html{background-color:#fff;color:#000;font-size

    2022年8月1日
    6
  • 五种常用手机Java编程软件[通俗易懂]

    五种常用手机Java编程软件[通俗易懂]越来越多的朋友都对编程感兴趣,编程需要工具,所以大家也想知道有哪些好用的java编程工具,接下来系哦啊吧就为大家介绍几款常用的相关编程工具。1.JDKJDK-java开发工具包JDK是Java开发工具包,基本上每个研究java的人都首先在机器上安装JDK,那么他有哪些部件呢?下面是运行java时真正工作的四个文件夹:bin、include、lib、jrebin:是最重要的是编译器包括:java和jvm与头文件lib:类库jre:java运行时环境的交互一般用于java程序的开发,而jre只运行类而不编译

    2022年7月21日
    12
  • 返回值是函数_void函数怎么用

    返回值是函数_void函数怎么用通常,希望通过函数使主调函数得到一个确定的值,这就是函数的返回值。说明:1、函数的返回值是通过函数的return语句获得的。(1)return语句将被调函数中的一个确定值带回主调函数中去。(2)

    2022年8月2日
    5

发表回复

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

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