Vue利用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)})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/755037.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

蓝桥杯历年真题省赛java b组 2017年第八届 k倍区间

一、题目 k倍区间 给定一个长度为N的数列&#xff0c;A1, A2, ... AN&#xff0c;如果其中一段连续的子序列Ai, Ai1, ... Aj(i < j)之和是K的倍数&#xff0c;我们就称这个区间[i, j]是K倍区间。 你能求出数列中总共有多少个K倍区间吗&#xff1f; 输入 ----- 第一…

rust - 计算文件的md5和sha1值

本文提供了一种计算文件md5和sha1的方法。 添加依赖 cargo add file-hashing cargo add md-5 cargo add sha1添加功能函数 use file_hashing::get_hash_file; use md5::Md5; use sha1::{Digest, Sha1}; use std::io::Error; use std::path::Path;pub fn md5<P: AsRef<…

TEMU是什么?TEMU自养号测评有什么优势?

一、 TEMU是什么&#xff1f; TEMU是拼多多于海外线的跨境电商平台&#xff0c;“Temu”这个名字的含义也和拼多多的意思相近。Temu跨境电商自上线以来&#xff0c;下载量不断攀升&#xff0c;发展势头一片大好&#xff0c;击穿地板价的商品在欧美市场掀起了一阵狂潮&#xff…

[每日一氵] 双Ubuntu共享网络

以下是我的记录 两台Ubuntu&#xff0c;名为AB A机有两张网卡&#xff0c;其中一个网卡可上网&#xff0c;另一个空着B机有一张网卡 现在AB直连&#xff0c;假设 eth0 是A连接到互联网的接口&#xff0c;而 eth1 是要连接到服务器B的接口。 将两台服务器通过网线直接连接起…

【漫谈】叔本华:不能让自己的头脑成为别人思想的跑马场

1.说明 标题是我自己总结加上的&#xff0c;正文都是节选自《叔本华&#xff1a;怎样读书才有效》&#xff0c;不同版本翻译略有不同。 不能让自己的头脑成为别人思想的跑马场。 2. 节选 1. 有自己的思考 我们读书时&#xff0c;是别人在代替我们思想&#xff0c;我们只不过…

mysql虚拟列Generated Column

目录​​​​​​​ 1、Generated Column简介 生成的列定义具有以下语法&#xff1a; 2、实践 2.1 存储格式为json字段增加索引 2.2 手机号后四位 3、虚拟列索引介绍 3.1 虚拟列索引的限制 3.1.1 Virtal Generated Column 4、阿里云数据库环境是否支持 下期扩展&…

大话适航(一)民航产业

0. 前言 eVTOL、飞行汽车和低空经济已成为热门话题&#xff0c;政府引导资本投入新赛道&#xff0c;也势必会吸引跨界厂商前来淘金。只说民用航空器整机制造&#xff0c;技术最接近的行业是军工&#xff0c;然后是无人机&#xff0c;还有汽车、农业机械等。“互联网”曾经掀起…

数据库应用:Linux 部署 GaussDB

目录 一、实验 1.环境 2.Linux 部署 GaussDB 3.Linux 使用 GaussDB 4.使用 GaussDB 进行表与索引操作 5.使用 GaussDB 进行视图操作 6.使用 GaussDB 进行联表查询 7.使用 GaussDB 进行外键关联 二、问题 1.运行python脚本报错 2. 安装GaussDB 报错 3. install 安装…

语音识别:whisper部署服务器,可远程访问,实时语音转文字(全部代码和详细部署步骤)

Whisper是OpenAI于2022年发布的一个开源深度学习模型&#xff0c;专门用于语音识别任务。它能够将音频转换成文字&#xff0c;支持多种语言的识别&#xff0c;包括但不限于英语、中文、西班牙语等。Whisper模型的特点是它在多种不同的音频条件下&#xff08;如不同的背景噪声水…

[C语言]指针详解一、数组指针、二维数组传参、函数指针

一、数组指针 对一个数组&#xff0c;如果我们想要让一个指针指向这个数组&#xff0c;我们应该如何定义呢?我们知道一个数组定义本来就是一个指针&#xff0c;那为何要多定义一个数组指针呢?我们来看看下面这个代码就理解了 #include <stdio.h> int main() {int arr…

【基础】哪个厂家的零件更标准?

时间限制 : 1 秒 内存限制 : 128 MB 在统计描述中,方差用来计算每一个变量(观察值)与总体均数之间的差异。比如:甲乙 2 个厂商生产某零件,一批零件要求在尺寸合格的情况下,大小越一致越好,由于生产工艺的问题,零件生产厂商生产的零件不可能一模一样。 为了检测甲乙两…

前端结合 react axios 获取真实下载、上传进度

首页确保项目中使用了axios axios ondownloadprogress中total总为零&#xff0c;content-length不返回? 点我查看 Axios Documention npm i axiosyarn add axios以下我们举例接口调用配置说明&#xff1a; 由于接口下载时&#xff0c;不确定文件下载时长&#xff0c;所以直…

AIX系统下挂载ISO镜像

我们需要将AIX的iso文件作为软件包的安装源挂载的系统目录中 首先我们查看系统下有哪些挂载文件 如何挂载一个系统iso镜像文件 loopmount -i /ftp/iso/LK4T_1807_11.iso -o "-V cdrfs -o ro " -m /mnt/iso 需要安装软件直接执行smit就可以了&#xff0c;在smit中…

phpStudy安装thinkCMF8时,如何解决服务器rewrite和APIrewrite不支持的问题

解决步骤&#xff1a; 一&#xff1a;服务器rewrite 点击后面的问号跳转到官方文档链接&#xff1a; 复制红框内的代码 打开phpstudy&#xff0c;找到配置的站点&#xff0c;点击管理&#xff0c;找到伪静态 点击确认保存即可。 phpstudy会自动重启站点。 此时&#xff0c;…

内网信息收集

本机信息收集 一、手工 1.查询网络配置信息: ipconfig /all 2. 查询操作系统和版本信息: systeninfo 查看系统体系架构&#xff1a;echo %PROCESSOR_ARCHITECTURE% 查看安装的软件及版本信息&#xff1a; wmic product get name,version 3.查询本机服务信息&#…

docker init 生成Dockerfile和docker-compose.yml —— 筑梦之路

官网&#xff1a;https://docs.docker.com/engine/reference/commandline/init/ 简介 docker init是一个命令行实用程序&#xff0c;可帮助初始化项目中的 Docker 资源。.dockerignore它根据项目的要求创建 Dockerfile、Compose 文件。这简化了为项目配置 Docker 的过程&#…

【NLP9-Transformer经典案例】

Transformer经典案例 1、语言模型 以一个符合语言规律的序列为输入&#xff0c;模型将利用序列间关系等特征&#xff0c;输出在一个在所有词汇上的概率分布&#xff0c;这样的模型称为语言模型。 2、语言模型能解决的问题 根据语言模型定义&#xff0c;可以在它的基础上完成…

PHP反序列化---字符串逃逸(增加/减少)

一、PHP反序列化逃逸--增加&#xff1a; 首先分析源码&#xff1a; <?php highlight_file(__FILE__); error_reporting(0); class A{public $v1 ls;public $v2 123;public function __construct($arga,$argc){$this->v1 $arga;$this->v2 $argc;} } $a $_GET[v…

探索区块链世界:从加密货币到去中心化应用

相信提到区块链&#xff0c;很多人会想到比特币这样的加密货币&#xff0c;但实际上&#xff0c;区块链技术远不止于此&#xff0c;它正在深刻地改变我们的生活和商业。 首先&#xff0c;让我们来简单了解一下什么是区块链。区块链是一种分布式数据库技术&#xff0c;它通过将…

三维GIS仿真技术发展的几点思考

随着近几年三维GIS的快速发展&#xff0c;三维GIS可视化在数字孪生、元宇宙等热点方向起着重要技术支撑&#xff0c;结合这几年三维GIS技术进展,其出现的进展与问题&#xff0c;有以下几点思考&#xff0c;供读者参考&#xff1a; 1.关于国内GIS三维仿真技术处于什么水平&#…