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


相关推荐

  • 软著源代码要求多少页_怎么查看源代码的编码格式

    软著源代码要求多少页_怎么查看源代码的编码格式申请软件著作权登记的时候会被要求提交60页的源代码。没有经验的开发者朋友第一次申请的时候难免会遇到因代码文档格式不正确、代码里含有其他版权信息等原因被要求补正的问题,从而导致拿证时间延误。为了帮助开发者朋友一次性顺利通过软件著作权登记的审查,下面为大家分享下自己总结的60页源代码整理攻略。第一步:请点击下载软件著作权登记源代码模板;第二步:将打算申请软著的软件名称及版本号替换模板里左上角“自助登记安卓版应用软件V1.0”;第三步:打开软件的代码文件,复制代码;第四步:回到本文档,“Ctal+A”.

    2025年11月26日
    29
  • QQ机器人制作教程,超详细「建议收藏」

    QQ机器人制作教程,超详细「建议收藏」目录前期准备1、机器人框架的下载和配置2、python的配置和安装具体实现1、发送信息2、获取群成员列表3、接收上报的事件4、实现简单的自动回复下一篇文章介绍更多功能前期准备1、机器人框架的下载和配置首先需要一个qq机器人框架,我使用的是基于mirai以及MiraiGo开发的go-cqhttp(里面有开发文档)。框架下载地址Windows下32位文件为go-cqhttp-v*-windows-386.zipWindows下64位文件为go-cqhttp-v*-windows-amd6

    2025年9月19日
    6
  • sql注入常用函数与bypasswaf

    0x00前言在sql注入当中会遇到各种各样的waf,如果需要bypass通常会涉及到一些冷门函数的运用,那么我们这时候就需要翻找手册来一个个查询,下面是我这几天收集到的一些常用函数,在waf过滤不

    2021年12月11日
    63
  • rest接口测试工具_常用的自动化测试框架

    rest接口测试工具_常用的自动化测试框架REST API 自动化测试 利器Rest Assured(API接口自动化测试框架体系)

    2022年4月20日
    56
  • 微机原理与接口技术马春燕答案_微机原理与接口技术难不难

    微机原理与接口技术马春燕答案_微机原理与接口技术难不难spContent=课程面向有志于从事计算机过程控制系统设计、或对计算机硬件结构感兴趣的学习者。总体目标是:具备输入/输出接口控制系统软硬件初步设计能力。课程以“家庭安全防盗系统”案例引导,主要介绍:计算机基础知识、微型机基本工作原理、80×86基本指令集、汇编程序设计、存储器接口设计、接口控制技术等。——课程团队课程概述在今天的信息化时代,计算机已成为了人类工作和生活中必不可少的一部分。计算机…

    2022年10月2日
    5
  • linux学习(一个) 在unbuntu通过添加新的用户

    linux学习(一个) 在unbuntu通过添加新的用户

    2022年1月5日
    51

发表回复

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

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