SpringBoot+Vue项目跨域问题

解决跨域问题

什么是本域

本域就是同协议，同域名，同端口的就叫本域。必须要三个都一样。

什么是跨域

在了解什么是跨域的时候，我们首先要了解一个概念，叫同源策略，什么是同源策略呢，就是我们的浏览器出于安全考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。是什么意思呢，比如淘宝和京东两个域名不同，如果允许跨域的话，那么我就可以在淘宝上发送一个请求给京东，并且京东会回应我数据，这么做是不符合实际的。

什么是session

session你可以理解为就是一个小型数据库（有点牵强）,它可以存放用户存入的键值对的值，但是session又将这些值存放在哪里呢？有人可能会说是存放在服务器中，当然，存放在服务器中固然是对的，那它又存放在服务器的什么地方呢？估计有不少人说是在内存中，其实，session真正的数据并不是存放在内存中的，就是本地存储，然后通过sessionId来标识键值对数据的唯一性（有点像redis了，但是信息的存放却是有本质性的区别）。

问题描述

前端控制台报错信息

Access to XMLHttpRequest at 'http://localhost:8080/login/verify?captcha=123' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

注意此时我的前端是http://localhost:63342后端是http://localhost:8080可以看出前端和后端的端口号不一样。

跨域解决方案

后端

如同我们上面说的，每发送一次链接，后端都会以为是一台新的主机来访问，所以我们就需要针对每一次请求来进行处理。处理每一次请求就需要用到拦截器。
1.在你的controller类上打上@CrossOrigin注解。
2.在Controller包同级目录下建一个配置包，创建一个配置类(包名 类名随意)，配置类内容如下。

package com.tensoflow.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
 * 1. @ClassDescription: 跨域问题的配置类
 * 2. @author: TenSoFlow
 * 3. @date: 2024年4月13日 17:03
 */
// CorsConfig 类用于配置跨源资源共享 (CORS) 规则
@Configuration
public class CorsConfig implements WebMvcConfigurer {

    // 重写 addCorsMappings 方法来配置 CORS 规则
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 允许所有路径的跨域访问
        registry.addMapping("/**")
                .allowedOriginPatterns("*") // 允许所有来源的跨域请求
                .allowedMethods("GET","POST","PUT","DELETE","HEAD","OPTIONS") // 允许的请求方法包括 GET、POST、PUT、DELETE、HEAD 和 OPTIONS
                .allowCredentials(true) // 允许携带身份凭证如token
                .maxAge(3600) // 预检请求的有效期为 3600 秒
                .allowedHeaders("*"); // 允许请求携带的自定义头信息
    }
}

跨域时session为null解决方案

在SpringBoot项目中跨域问题的出现往往是前后端使用的端口号不一样。如果没有跨域的问题，session是可以确定的，但是在跨域的时候，我每次访问，都会像是新的一台主机访问我的服务器，就会造成session的新建，话说都新建一个session了，那我还能访问到原来的session数据吗？那是不可能的。

前端

解决跨域时session为null当然要先解决跨域问题。所以后端您需要先按照上文的方式先配置。然后再配置前端。
设置axios允许跨域携带cookie

axios.defaults.withCredentials = true;// 允许跨域携带cookie

此种方法只能解决前后端端口号不一样时session为空的问题，至于IP地址不同时session为空需要用到Nginx反向代理。

---

更多内容请移步 TenSoFlower 的博客 http://tensoflower.github.io

---

云盘山腰间，脚踏山之颠，本是山下人，却成云上仙。