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


相关推荐

  • Scrivener for Mac如何自定义快捷键

    Scrivener for Mac如何自定义快捷键Scrivenerformac是目前苹果osx平台上最优秀的写作软件,拥有简单而又独特的操作界面,提供了标注、概述、收藏保存、全屏幕编辑、快照等各种写作辅助功能,可以对文章进行大致的勾勒或者重组,并且支持用户使用关键词跟踪主题,动态联合多种场景到单个文本,从而辅助作者完成从作品构思、搜集资料、组织结构、增删修改到排版输出的整个写作流程,能够适用于博主、作家、专栏作者使用。在ScrivenerforMac中分配或更改键盘快捷键可能存在某些菜单项,您发现自己使用了很多没有键盘快捷键的菜单项,或者您

    2022年5月25日
    36
  • System.getProperty()

    System.getProperty()System类来自于这个包:java.lang.SystemSystem.getProperty("XXX")方法用来读取JVM中的系统属性,那么java虚拟机中的系统属性使用

    2022年7月3日
    21
  • sqljdbc4.jar和sqljdbc.jar下载「建议收藏」

    sqljdbc4.jar和sqljdbc.jar下载「建议收藏」官网下载:windows版本http://go.microsoft.com/fwlink/?LinkId=144633&clcid=0x804UNIX版本http://go.microsoft.com/fwlink/?LinkId=144635&clcid=0x804  推荐几个网站:http://maven.ibiblio.org/maven/http…

    2022年7月16日
    19
  • Ubuntu终端打开文件及查看目录「建议收藏」

    Ubuntu终端打开文件及查看目录「建议收藏」方法/步骤 1ctrl+alt+t,调出终端。———— 要去某个目录,用cd 例如:cd/home/yang/下载/ 在视图中,后面还有一个文件夹,我记不住,就按tab键一下。就自动出来了。 如果该文件夹下东西比较多,你记不住,那就多按两次tab,就会出现可以进入的文件夹。在这里我要进入【下载】文件夹里。————- …

    2022年10月11日
    3
  • linux中pushd和popd用法,在Linux中使用pushd和popd命令操作目录的用法

    linux中pushd和popd用法,在Linux中使用pushd和popd命令操作目录的用法pushd将目录压入目录栈,进行目录切换命令用法:pushd[-n][+N|-N|dir]参数:+n切换目录,以当前目录为准,从右向左数第n个-n切换目录,以当前目录为准,从左向右数第n个例:复制代码代码如下:[root@localhostzhangy]#pushd/root~/home/zhangy#这个符号~代表根home目录复制代码代码如下:[root…

    2022年6月20日
    30
  • tracert命令的原理是什么_tracert命令的原理

    tracert命令的原理是什么_tracert命令的原理1. Tracert 命令的原理与作用Tracert命令诊断实用程序通过向目标计算机发送具有不同生存时间的ICMP数据包,来确定至目标计算机的路由,也就是说用来跟踪一个消息从一台计算机到另一台计算机所走的路径。该诊断实用程序将包含不同生存时间 (TTL

    2022年9月24日
    6

发表回复

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

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