vue和springboot交互数据，使用axios【跨域问题】

vue和springboot交互数据，使用axios【跨域问题】

提示：帮帮志会陆续更新非常多的IT技术知识，希望分享的内容对您有用。本章分享的是node.js和vue的使用。前后每一小节的内容是存在的有：学习and理解的关联性。【帮帮志系列文章】：每个知识点，都是写出代码和运行结果且前后关联上的去分析和说明（能大量节约您的时间）。

所有文章都*不会*直接把代码放那里，让您自己去看去理解。我希望我的内容对您有用而努力~

---

---

本文章是系列文章，技术栈内容为：【springboot+vue】【前后分离】
【详细图文，实操步骤分享，节约时间版】。最终完成一个商业化项目。内容有：
springboot知识
mybatisPlus知识
vue知识
node.js知识

本小节的内容是：
vue篇章 之 ： vue和springboot交互数据，使用axios【解决跨域问题】

---

---

每一个文章小节都会把 标题 说的很清楚。前后关联看，可以快速实现：前后分离。本质上，额外文章链接和文章自己标题内容关系不大。

前面小节文章已经实现springboot的创建，springboot关联前端数据swagger和springboot通过mybatisplus操作数据库：
【2025年】基于电脑的jdk1.8通过idea创建springboot2.x版本(非常简洁快速)
【上榜文章，一文搞定】现在springboot是3.x以上版本，jdk版本至少要求17.但是很多时候我们电脑是jdk1.8(求稳定性和安全性)。文本分享本机电脑1.8的jdk。idea如何非常简洁快速的创建springboot
文章里面也有 为什么只能是jdk17起和地址指定为阿里云报错的解决办法

---

---

---

本文章是重点描述：跨域问题
本文章是重点描述：跨域问题：不是一个同源数据，不能访问读写对方的资源
本文章是重点描述：同源策略是约定，是浏览器最核心最基本的安全问题

前面小节已经安装好node.js和分享了一些vue语法，及RESTful风格及安装配置swagger使用，和：
vue实现与后台springboot传递数据【传值/取值 Axios 】
这个文章是 Axios 详细语法和实现步骤
里面算是总结当前系列的所有代码汇总：有前端vue的，有后台springboot的。包括实际axios的语法
【它也是上榜文章，可以一看：里面有axios的快速实现代码】

链接文章里面：直接是实现Axios的案例解决方案(代码实例),代码已经直接解决了跨域，当然也标注了注释。没有那些代码的话，一直取不到数据。但是那个文章并没有详细去描述跨域问题。如果不解决跨域，就存在同源策略的问题：

---

前言

如果不解决跨域，就存在同源策略的问题
vue里面的axios 和 springboot里面的controller写在多都没有用。它不能交互数据

什么是同源策略：
所谓同源：即指向同一个域。就是两个页面具有相同的协议：主机(ip地址) 和 端口号(port)

当一个请求url的协议(http)，域名(ip地址)，**端口(port)**三者之间有任何一个与当前页面url不同，即为跨域。
此时无法读取非同源网页的cookie和无法向非同源地址发送ajax请求。

目前我们的项目：
node启动vue前端项目，端口是8080
idea启动springboot自带的tomcat，端口是8081
不管怎么样，是多少。它们两个端口都不是同一个，在程序和协议眼里，就是两个项目，两个地址。即为跨域

为了保证数据和浏览器的安全，全行业遵循：
不同源的客户端和url地址，在-没有-明确授权的情况下，不能读写对方的资源
很好理解和熟知：咱不能自己打开一个网站url，它就能把其他网站url的传输数据读取了，不可能。行业对于安全之一最基础的就是现在分享的同源策略

---

CORS

CORS（Cross-Origin Resource Sharing） 是由W3C制定的一种跨域资源共享技术标准，其目的就是为了解决当前的跨域请求
CORS可以在不破坏即有规则的情况下，去通过后端服务器实现CORS接口，从而实现跨域通信。
CORS将请求分为两类：简单请求和非简单请求，分别对跨域通信提供了支持。

简单请求

满足以下条件就是简单请求：
请求方法/提交方式：GET POST HEAD
除了以下请求头字段之外，没有自定义的请求头：
Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type
Content-Type的值 -只有- 以下三种：
text/plain multipart/form-data application/x-www-form-urlencoded

简单请求的服务器处理
对于简单请求，CORS的策略是请求时在请求头中添加一个Origin字段：

假设有一个网页https://example.com
需要从API服务https://api.example.com/data获取数据
由于这个请求满足简单请求的条件，浏览器会直接发送请求 (请求头request head) ：

GET /data HTTP/1.1 Host: api.example.com Origin: https://example.com
做项目的时候 网页修改为ip地址一样的

服务器接收到请求之后，根据该字段判断是否允许这个请求的访问，如果允许，就在HTTP头中添加 Access-Control-Allow-Origin 字段
(相应response：)
HTTP/1.1 200 OK Access-Control-Allow-Origin: https://example.com Content-Type: application/json { “data”: “Sample data” }

非简单请求

不满足上述条件的请求即为非简单请求。例如，使用PUT、DELETE等方法，或者POST方法包含除Content-Type和Accept之外的其他头信息。
对于非简单请求，浏览器会先发送一个OPTIONS请求（预检请求）到服务器，以确认服务器是否允许跨域请求。
称为预检请求(preflight request)
预检请求将真实信息：请求方法，自定义字段，源信息添加到HTTP头信息中，询问服务器是否允许这样的操作。

‌服务器响应预检请求‌：服务器需要在响应中包含以下信息：
Access-Control-Allow-Origin：指定哪些源可以访问资源。
Access-Control-Allow-Methods：指定允许的方法。
Access-Control-Allow-Headers：指定允许的头信息。

实际请求‌：如果预检请求成功，浏览器会发送实际的非简单请求，服务器需要按照预检响应中的设置进行处理。

代码编写(解决方式)

简单请求和非简单请求
是浏览器层面的处理方式(打开浏览器开发者工具，查询network网络，可以看到请求头…和响应…)。
一般开发里面，我们去springboot后台服务器添加对应的代码：

springboot中配置CORS
编写一个工具类:

@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("*/**") //允许跨域访问的路径.allowedOrigins("*") //允许跨域访问的源.allowedMethods("GET","POST","PUT","OPTIONS","DELETE") //允许请求的方式.maxAge(1000000)    //预检的时间.allowedHeaders("*") //允许头部设置.allowCredentials(true); //是否发送cookie}
}// 工具类   可以配置的很细节 
// 目前是基本全部权限都放开了：(如果您感觉前后分离，有跨域问题，可以直接复制)

不想使用工具类，在对应的某一个controller类上面，加@CrossOrigin：
表示：这个类里面的方法路径，都允许跨域访问，没有配置类里面写的那么细节

@RestController
@CrossOrigin
public class UserController {}

---

总结

说明一下：整个这个系列实现前后分离的springboot+vue项目。序号文章一共也就10几篇，只有核心图文重点操作步骤来实现这个目标(基本上您边看边写：一个小时或者一上午就能跟着一起手搓一个前后分离项目，然后您可以自行添加功能和内容在您项目里面)

（会陆续更新非常多的IT技术知识及泛IT的电商知识，可以点个关注，共同交流。ღ( ´･ᴗ･` )比心）
（也欢迎评论，提问。 我会依次回答~）