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详细学习路线及路线图

    java详细学习路线及路线图java详细路线:原文出自点击打开链接本文将告诉你学习Java需要达到的30个目标,学习过程中可能遇到的问题,及学习路线。希望能够对你的学习有所帮助。对比一下自己,你已经掌握了这30条中的多少条了呢?路线Java发展到现在,按应用来分主要分为三大块:J2SE,J2ME和J2EE。这三块相互补充,应用范围不同。J2SE就是Java2的标准版,主要用于…

    2022年6月12日
    31
  • oracle 第一范式,数据库范式之第一范式

    oracle 第一范式,数据库范式之第一范式数据库范式(DatabaseNormalization)设计关系数据库时,遵从不同的规范要求,设计出合理的关系型数据库,这些不同的规范要求被称为不同的范式,各种范式呈递次规范,越高的范式数据库冗余越小。目前关系数据库有六种范式:第一范式(1NF)、第二范式(2NF)、第三范式(3NF)、巴斯-科德范式(BCNF)、第四范式(4NF)和第五范式(5NF,还又称完美范式)。首先要明白”范式(NF)”…

    2022年5月24日
    37
  • setfacl 命令[通俗易懂]

    setfacl 命令[通俗易懂]setfacl命令是用来在命令行里设置ACL(访问控制列表)。在命令行里,一系列的命令跟随以一系列的文件名。选项-b,–remove-all:删除所有扩展的acl规则,基本的acl规则(所有者,群组,其他)将被保留。-k,–remove-default:删除缺省的acl规则。如果没有缺省规则,将不提示。-n,–no-mask:不要重新计算有效权限。setfacl…

    2022年6月16日
    57
  • python numpy 矩阵转置

    python numpy 矩阵转置记录下问题…常规用法如下:值得注意的是行向量转换成列向量或者列向量转换成行向量,注意矩阵的定义。

    2022年6月2日
    40
  • 安卓天天练练(五)CompoundButton

    安卓天天练练(五)CompoundButtonToggleButton让我想起了从前jQuery还没有取消toggle方法时是怎么偷懒的。。注意:如果LinearLayout,与RelativeLayout不同,必须有orientation。用可视化顶部的横着隔开或者竖着隔开的方形按钮也可以选择,例如android:orientation=”vertical”三目运算符前面和js一样,那个state是不需要额外带括号的按…

    2022年5月25日
    37
  • React图片懒加载

    React图片懒加载话不多说了,创建一个LazyLoad.js的React组件,然后将下面的代码复制过去:importReactfrom’react’//import’./lazyload.css’//thresholdconstthreshold=[0.01]classLazyLoadextendsReact.Component{construc…

    2022年4月6日
    33

发表回复

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

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