当前端遇上CORS：解析报错及解决方法

---

引言

在前后端分离项目中，前端和后端通常运行在不同的域名或端口上，这就引发了跨域资源共享（CORS）的问题。在这篇文章中，我们将探讨一种常见的现象，即在前端使用 Vue3 项目（使用 Vite 打包）与后端 Spring Boot 项目配合时，可能会遇到的跨域问题，以及如何解决它们。

---

问题现象

您在前端项目中遇到的问题可能表现为以下错误信息：

Access to XMLHttpRequest at 'http://localhost:9999/user/info' from origin 'http://localhost:7000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这个错误提示表明浏览器拒绝了跨域请求，因为没有正确配置 CORS 头信息。尽管您在后端已经配置了 CORS，但问题仍然存在。接下来，我们将解释为什么会出现这个问题以及如何解决它。

---

问题原因

1. CORS 预检请求问题： 当浏览器执行跨域请求时，它首先发送一个 OPTIONS 预检请求，以检查服务器是否允许实际请求的跨域操作。在这种情况下，您的后端过滤器 LoginCheckFilter 拦截了所有请求，包括预检请求，但没有返回正确的 CORS 头信息。

2. 后端过滤器干扰： 您的后端过滤器 LoginCheckFilter 在处理预检请求时，可能未正确配置 CORS 头信息，导致浏览器拒绝访问。

---

解决方法

要解决这个问题，您需要在 LoginCheckFilter 过滤器中正确处理预检请求并返回适当的 CORS 头信息。以下是解决方法的步骤：

1. 在 LoginCheckFilter 中处理预检请求： 在 doFilter 方法中，首先检查请求是否为 OPTIONS 请求（预检请求）。

2. 返回正确的 CORS 头信息： 如果请求是预检请求，返回正确的 CORS 头信息，包括 Access-Control-Allow-Origin、Access-Control-Allow-Headers、Access-Control-Allow-Methods 和 Access-Control-Max-Age。

3. 继续处理其他请求： 对于非预检请求，继续处理您的业务逻辑。

以下是示例代码，您可以在 LoginCheckFilter 中添加它们：

@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain chain) throws IOException, ServletException {
    HttpServletRequest request = (HttpServletRequest) servletRequest;
    HttpServletResponse response = (HttpServletResponse) servletResponse;

    // 处理预检请求
    if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:7000");
        response.setHeader("Access-Control-Allow-Headers", "token, Content-Type"); // 根据需要设置允许的头信息
        response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE"); // 根据需要设置允许的请求方法
        response.setHeader("Access-Control-Max-Age", String.valueOf(MAX_AGE)); // 根据需要设置最大有效时长
        return;
    }

    // 处理其他请求
    // ...

    chain.doFilter(request, response);
}

---

注意事项

1. 配置允许的源和头信息： 在设置 CORS 头信息时，确保配置了允许的源（Access-Control-Allow-Origin）、允许的头信息（Access-Control-Allow-Headers）、允许的请求方法（Access-Control-Allow-Methods）和最大有效时长（Access-Control-Max-Age）以适应您的项目需求。

2. 测试和调试： 在进行配置更改后，务必测试和调试您的前端和后端以确保跨域问题已解决。浏览器的开发者工具和网络面板可以帮助您跟踪请求和响应，以检查是否正确设置了 CORS 头信息。

3. 了解安全性考虑： 跨域请求涉及到安全性考虑，确保只允许信任的来源访问您的后端资源以保护您的应用程序。

---

结论

跨域资源共享（CORS）问题在前后端分离项目中常常会遇到，但通过正确配置 CORS 头信息和处理预检请求，您可以轻松解决这些问题。这篇文章提供了一种针对前端使用 Vue3（Vite 打包）和后端使用 Spring Boot 项目的常见跨域问题的解决方法，以及相关注意事项。通过遵循这些指南，您可以确保您的前端和后端可以协同工作，提供出色的用户体验。

---

参考链接

• MDN Web Docs - HTTP access control (CORS)