跨域问题？如何解决？

前言

在当今互联网时代，前端开发中经常会遇到跨域问题，即浏览器禁止向不同源的服务器发送请求。这意味着在开发过程中，如果我们的前端代码需要与其他域名下的接口进行通信，我们将面临无法直接发送请求的困境。跨域问题的存在给开发带来了不少麻烦，然而，在跨域问题之下，我们也发现了解决的方法。本篇博客将为大家介绍如何解决跨域问题的一些有效策略和技巧。

什么是跨域问题

跨域问题是指在浏览器上运行的Web应用程序试图通过XMLHttpRequest或Fetch API等方式向不同源（域名、协议或端口）的服务器发送请求时，浏览器会根据同源策略（Same-Origin Policy）阻止这种行为。同源策略是一种安全机制，用于限制来自不同源的页面对当前页面的访问。它可以防止恶意的网站通过跨域请求获取用户的个人信息或进行未授权操作。

同源策略要求请求的协议、域名和端口号必须完全相同才被认为是同源。例如，一个页面从 http://example.com/index.html 发出的请求，如果请求的目标地址是 http://api.example.com/data，由于协议、域名和端口号不一致，就会被浏览器阻止。在这种情况下，浏览器会抛出一个跨域错误，导致请求失败。

如何解决

JSONP（JSON with Padding）：利用 script 标签的跨域特性，通过动态创建 script 标签并设置其 src 属性为跨域的 URL，服务器端返回的响应数据需要用特定的格式包裹起来，并通过回调函数返回给客户端。这种方式只适用于 GET 请求，并且需要服务器端支持返回 JSONP 格式。
CORS（跨域资源共享）：在服务器端设置相应的响应头，允许跨域请求。通常在服务器端设置 Access-Control-Allow-Origin 头部，指定允许的来源域名，即可实现跨域请求的许可。CORS 支持各种 HTTP 请求方法，并且更加灵活和安全。
代理服务器：在同源策略限制下，可以通过在同域名下的服务器上设置一个代理服务器，将客户端请求转发到目标服务器，再将相应的结果返回给客户端。客户端只需要与代理服务器通信，而不是直接与目标服务器通信，间接实现了跨域请求。
WebSocket：WebSocket 是一种基于 TCP 协议的全双工的通信协议，它不受同源策略的限制，在建立连接后，客户端与服务器之间可以直接进行双向通信。因此，可以利用 WebSocket 实现跨域通信。

在Spring中怎么解决跨域问题

使用 @CrossOrigin 注解：在控制器类或控制器方法上使用@CrossOrigin注解来允许指定的域名进行跨域访问。代码示例如下：

在控制器类上使用@CrossOrigin注解：

复制代码

@RestController
@CrossOrigin //该类所有方法允许跨域
public class AccountController {
    //注册 API 接口
    @PostMapping("/v1/user/register")
    public ResultVo<String> register(AccountDto accountDto){
        System.out.println(accountDto);
        return ResultVo.success("register_ok");
    }
}

在控制器类方法上使用@CrossOrigin注解：

复制代码

@RestController
public class AccountController {
    //注册 API 接口
    @PostMapping("/v1/user/register")
    @CrossOrigin //该方法允许跨域
    public ResultVo<String> register(AccountDto accountDto){
        System.out.println(accountDto);
        return ResultVo.success("register_ok");
    }
}

在配置文件中来自定义跨域配置

复制代码

  <mvc:cors>
      <mvc:mapping path="/**"/>
  </mvc:cors>

总结

跨域问题是在Web开发中常遇到的挑战之一。当页面上的JavaScript代码尝试通过XMLHttpRequest或Fetch API等方式向不同域名、协议或端口的服务器发送请求时，浏览器会根据同源策略（Same-Origin Policy）阻止这种行为。解决跨域问题有多种方法，常用的包括JSONP、CORS、代理服务器等。在Spring框架中，可以使用@CrossOrigin注或者配置全局跨域设置来处理跨域请求。选择不同的解决方案取决于项目需求和后端服务的支持情况。通过正确的解决方案，可以保证数据通信的安全性和稳定性，提高开发效率和用户体验。跨域问题是web开发中不可忽视的问题，了解解决方案对于前端开发者至关重要。