【知识点】什么是跨域？springboot+vue如何解决跨域问题？

跨域（Cross-Origin）是指在浏览器环境下，当前网页所在的域名与请求资源所在的域名、协议或端口不一致，导致浏览器出于安全考虑拒绝发送或接受请求的行为。同源策略（Same-Origin Policy）是现代浏览器对跨域行为的限制。

同源策略要求网页的源 (协议 + 域名 + 端口) 必须与请求目标的源完全匹配，否则浏览器会限制跨域请求。这是一种重要的安全措施，用于保护用户数据免受恶意网站的攻击。

以下是一些常见的跨域场景和示例：

不同域名之间的跨域：

场景：前端页面在 http://example.com 上，请求的后端 API 在 http://api.example.com 上。
示例：由于源不一致，浏览器会阻止前端页面发送对 http://api.example.com 的请求。
不同协议之间的跨域：

场景：前端页面在 http://example.com 上，请求的后端 API 在 https://example.com 上。
示例：由于协议 (HTTP 和 HTTPS) 不一致，浏览器会阻止前端页面发送对 https://example.com 的请求。
不同端口之间的跨域：

场景：前端页面在 http://example.com 上，请求的后端 API 在 http://example.com:8080 上。
示例：由于端口不一致，浏览器会阻止前端页面发送对 http://example.com:8080 的请求。
子域名之间的跨域：

场景：前端页面在 http://www.example.com 上，请求的后端 API 在 http://api.example.com 上。
示例：由于子域名不一致，浏览器会阻止前端页面发送对 http://api.example.com 的请求。
以上是常见的跨域示例。当浏览器发现跨域行为时，会发出一个跨域安全策略限制的错误，并且请求不会被发送到目标服务器。为了允许跨域请求，需要在服务器端进行相应的配置（如CORS）或选择合适的解决方案。

在前后端分离的 Spring Boot 项目中，跨域问题是指在浏览器中运行的前端应用程序（通常使用JavaScript）请求不同域名或端口的后端 API 接口时所遇到的安全限制。

浏览器出于安全考虑实施了同源策略(Same-Origin Policy)，该策略要求发起请求的网页和接收响应的目标服务器必须具有相同的协议、域名和端口。如果跨域请求没有得到明确的授权，浏览器将阻止请求发送，并返回一个错误。

为了解决跨域问题，可以采取以下方法：

CORS（跨域资源共享）：在后端 API 接口中配置 CORS 支持，允许特定的域名或所有域名访问接口。在 Spring Boot 中，可以通过在后端的控制器（Controller）类或方法上添加 @CrossOrigin 注解来启用 CORS 支持。示例代码如下：

java
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(origins = “http://example.com”)
public class MyController {
@GetMapping(“/api/data”)
public String getData() {
// 处理请求并返回数据
}
}
在上述代码中，@CrossOrigin 注解将指定允许来自 http://example.com 域名的跨域请求。

代理服务器：通过在前端应用程序的配置中设置代理服务器，将所有请求转发到后端 API。这样，前端应用程序看起来仍然在与同一域上通信，避免了跨域限制。一些常见的代理服务器如 Nginx、Apache HTTP Server等。

例如，可以将所有以 /api/ 开头的请求转发到后端的 localhost:8080 地址：

nginx
location /api/ {
proxy_pass http://localhost:8080/;
}
JSONP（JSON with Padding）：JSONP 是一种通过动态创建

以上是解决跨域问题的常用方法。选择适合你项目的解决方案，并确保了解其安全性和适用性。