前端跨域问题怎么在后端解决

简单的解决方法：

添加配置类：

为什么会跨域

[1. 什么是源](#1. 什么是源)

[2. URL结构](#2. URL结构)

[3. 同源不同源举🌰](#3. 同源不同源举🌰)

同源例子

不同源例子

[4. 浏览器为什么需要同源策略](#4. 浏览器为什么需要同源策略)

[5. 常规前端请求跨域](#5. 常规前端请求跨域)

简单的解决方法：

添加配置类：

java 复制代码

package com.company.usercenter.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:5173") // 前端地址,可以写多个，线上地址、开发地址、测试地址
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .allowedHeaders("*");
    }
}

解决方法写完了，下面是具体的解释，请需要看的小伙伴选择性查收❤❤❤❤❤❤❤❤

首先解释下这个配置类：

这个 CorsConfig 配置类是用于解决前后端分离开发中的跨域问题，以下是对代码的详细解释：

注解与类定义 @Configuration：表明这是一个 Spring 配置类，用于定义配置 bean 或引入其他配置。 implements WebMvcConfigurer：实现 Spring 的 WebMvcConfigurer 接口，通过重写接口方法扩展 Spring MVC 的功能，这里用于配置跨域规则。
addCorsMappings 方法通过 CorsRegistry 对象注册跨域规则： registry.addMapping("/")：定义跨域规则的匹配路径，"/ " 表示匹配所有后端接口路径，即所有接口都应用该跨域规则。 allowedOrigins("http://localhost:5173")：指定允许访问后端接口的前端来源（Origin）。这里明确允许 http://localhost:5173（通常是前端开发服务器地址）发起的跨域请求，不能使用 * 搭配 allowCredentials(true)（因为 * 会忽略凭证携带）。 allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")：允许的请求方法，包括常见的 GET（查询）、POST（提交）、PUT（更新）、DELETE（删除），以及跨域预检请求 OPTIONS。 allowCredentials(true)：允许前端请求携带认证凭证（如 Cookie、HTTP 认证等）。开启后，前端需配合 withCredentials: true（如 Axios 中 myAxios.defaults.withCredentials = true）使用。 allowedHeaders("*")：允许前端请求携带任意请求头（Header）。若需限制，可改为具体头名称（如 "Content-Type", "Authorization"），提升安全性。
整体功能该配置类为后端接口开启跨域支持，允许 http://localhost:5173 来源的前端应用，使用多种请求方法、携带凭证和任意请求头访问后端所有接口，解决前后端分离开发中的跨域问题。实际生产环境中，allowedOrigins 和 allowedHeaders 应根据需求细化，避免过度开放。

为什么会跨域

说到跨域不得不谈的就是浏览器的同源策略，跨域也是因为浏览器这个机制引起的，这个机制的存在还是在于安全。

1. 什么是源

Web内容的源由用于访问它的URL 的方案(协议)，主机(域名)和端口定义。只有当方案，主机和端口都匹配时，两个对象具有相同的起源。

同源不同源一句话就可以判断：就是url中 scheme host port 都相同即为同源。

下面认识下url 结构中的这三个部分。

2. URL结构

URL 代表着是统一资源定位符（Uniform Resource Locator）。URL 无非就是一个给定的独特资源在 Web 上的地址。

URL有如下结构组成：

Schme 或者 Protocol

Domain Name 也叫做host域名

port 端口号

Parameters参数

Anchor 锚点，一般用于定位位置

3. 同源不同源举🌰

举一下同源不同源的例子，便于

同源例子

例子	原因
http://example.com/app1/index.html http://example.com/app2/index.html	相同的 scheme http 和host
http://Example.com:80 http://example.com	http 默认80端口所以同源

不同源例子

例子	原因
http://example.com/app1 https://example.com/app2	不同的协议
http://example.com http://myapp.example.com	不同的host
http://example.com http://example.com:8080	不同的端口

4. 浏览器为什么需要同源策略

同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

5. 常规前端请求跨域

在没有前后端分离的时候，跨域问题往往是很少的。因为前后端都部署到一起。现在前后端分离不管vue /react 面临跨域请求的问题。

下面是引用官网描述的一张图来解释跨域：

跨源域资源共享（CORS）机制允许 Web 应用服务器进行跨源访问控制，从而使跨源数据传输得以安全进行。现代浏览器支持在 API 容器中（例如 XMLHttpRequest 或 Fetch）使用 CORS，以降低跨源 HTTP 请求所带来的风险。