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

目录

简单的解决方法：

添加配置类：

为什么会跨域

1. 什么是源

2. URL结构

3. 同源不同源举🌰

同源例子

不同源例子

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

5. 常规前端请求跨域

---

简单的解决方法：

添加配置类：

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 {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("http://localhost:5173") // 前端地址,可以写多个，线上地址、开发地址、测试地址.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS").allowCredentials(true).allowedHeaders("*");}
}

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

首先解释下这个配置类：

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

1. 注解与类定义 @Configuration：表明这是一个 Spring 配置类，用于定义配置 bean 或引入其他配置。 implements WebMvcConfigurer：实现 Spring 的 WebMvcConfigurer 接口，通过重写接口方法扩展 Spring MVC 的功能，这里用于配置跨域规则。

2. 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"），提升安全性。

3. 整体功能 该配置类为后端接口开启跨域支持，允许 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 请求所带来的风险。