Vue利用axios发送请求并代理请求的实现代码

 更新时间:2024年10月21日 09:36:00   作者:小李大魔王  
在Web开发中,跨域问题是一个常见难题,通常由浏览器的同源策略引起,通过简单配置vue.config.js文件,以及安装axios依赖,即可实现前后端的无缝连接和数据交换,这种方法简便有效,对于处理跨域请求问题非常实用

     由于浏览器的同源策略,发送请求时常常遇到跨域问题,一种解决办法是让后端配置跨域,还有一种就是使用代理(与前端工程一起启动,同一个端口),因为代理不是通过浏览器发送的,所以不受同源策略的限制

服务器代码

 用SpringBoot工程(端口为8082)简单写了一个Controller层,用于·接收前端发来的请求,并返回数据,前端请求

http://localhost:8082/students 时会返回学生列表数据,访问 http://localhost:8082/cars 时会返回汽车列表数据

import com.example.pojo.Car;
import com.example.pojo.Student;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
public class TestController {
    private List<Student>studentList=List.of(
            Student.builder().id("001").name("张三").age(Short.valueOf("18")).build(),
            Student.builder().id("002").name("李四").age(Short.valueOf("19")).build(),
            Student.builder().id("003").name("王五").age(Short.valueOf("20")).build()
    );
    private List<Car>carList=List.of(
            Car.builder().id("001").name("奥迪").price(100000F).build(),
            Car.builder().id("002").name("玛莎拉蒂").price(500000F).build(),
            Car.builder().id("003").name("奔驰").price(300000F).build()
    );
    @GetMapping("/students")
    public List<Student>getStudentList(){
        return studentList;
    }
    @GetMapping("/cars")
    public List<Car>getCarList(){
        return carList;
    }
}

前端代码

通过配置代理进行请求的转发,实现跨域访问,在vue.config.js文件中配置如下代码

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  //开启代理服务器
  devServer:{
    proxy: {
      '/api': {
        target: 'http://localhost:8082/', // 你想要代理到的地址
        pathRewrite: {
          '^/api': '/' // 重写路径,将 /api 替换为 /
        }
      }
    }
  }
})

通过axios发送请求,先在终端输入 npm i axios 引入axios的依赖包,然后通过一下代码发送请求

axios.get("/api/students")
    .then(
    	//请求成功的回调函数
        response=>{
            this.studentList=response.data
         },
    	//请求失败的回调函数
        err=>{
            alert(err.message)
        }
    )

到此这篇关于Vue利用axios发送请求并代理请求的文章就介绍到这了,更多相关Vue axios发送请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 如何理解Vue的.sync修饰符的使用

    如何理解Vue的.sync修饰符的使用

    本篇文章主要介绍了如何理解Vue的.sync修饰符的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 快速了解Vue父子组件传值以及父调子方法、子调父方法

    快速了解Vue父子组件传值以及父调子方法、子调父方法

    这篇文章主要介绍了Vue父子组件传值以及父调子方法、子调父方法,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • 10分钟了解Vue3递归组件的用法

    10分钟了解Vue3递归组件的用法

    递归 简单来讲就是程序自己调用自身,vue中的递归组件就是,组件自身调用自身,下面这篇文章主要给大家介绍了关于Vue3递归组件的用法,需要的朋友可以参考下
    2022-03-03
  • vue如何自定义InputNumber计数器组件

    vue如何自定义InputNumber计数器组件

    这篇文章主要介绍了vue如何自定义InputNumber计数器组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 解决vue 使用axios.all()方法发起多个请求控制台报错的问题

    解决vue 使用axios.all()方法发起多个请求控制台报错的问题

    这篇文章主要介绍了解决vue 使用axios.all()方法发起多个请求控制台报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue3 pinia实现持久化详解

    vue3 pinia实现持久化详解

    Pinia是Vue3的状态管理工具,安装后在入口文件引入,定义store并在组件中使用,本文主要介绍了Vue3中如何使用pinia实现持久化,需要的可以参考下
    2024-11-11
  • vue 更改连接后台的api示例

    vue 更改连接后台的api示例

    今天小编就为大家分享一篇vue 更改连接后台的api示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue2使用el-date-picker实现动态日期范围demo

    vue2使用el-date-picker实现动态日期范围demo

    这篇文章主要为大家介绍了vue2使用el-date-picker实现动态日期范围示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • Vue的computed属性出现突然不更新的原因及解决方案

    Vue的computed属性出现突然不更新的原因及解决方案

    Vue的computed属性为何突然不更新,本文深入解析其核心机制、常见不更新场景及解决方案,涵盖依赖追踪、缓存机制、调试技巧与Vue3差异,助你高效解决响应式问题,需要的朋友可以参考下
    2026-05-05
  • vscode中eslint插件的配置(prettier配置无效)

    vscode中eslint插件的配置(prettier配置无效)

    这篇文章主要介绍了vscode中eslint插件的配置(prettier配置无效),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09

最新评论