别着急，坐和放宽
这篇主要来聊一聊前端常见的跨域问题，以及后端如何处理 CORS 和预检请求 (Preflight)。
浏览器在什么情况下会发生跨域
浏览器通过“同源策略”限制不同源之间的资源交互，以保护用户隐私和安全。其中源由三个部分组成：协议、域名 和 端口。只有这三者同时满足才是同源。否则，就是跨域，向服务端发送请求时会触发浏览器的跨域限制，报以下错误：
Access to fetch at 'https://server.suemor.com/api/posts' from origin 'https://suemor.com' CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
具体看下方 4 个例子。
跨域
以下是三种跨域情况：
不同协议
https://suemor.com
http://suemor.com/api/posts
不同域名
https://suemor.com
https://server.suemor.com/api/posts
//tips: 下方这个也是跨域
http://127.0.0.1:3000 -> http://localhost:3000/api/posts
不同端口
http://localhost:3000
http://localhost:5050/api/posts
同源
下方这个是同源，没有跨域问题。
https://suemor.com
https://suemor.com/api/posts
解决跨域
跨域问题通常在服务端解决，通过配置反向代理或修改后端代码。
跨域请求分为简单请求和复杂请求：
简单请求
对于同时满足以下三个条件的即为简单请求，服务器只需返回正确的 CORS 头，即 Access-Control-Allow-Origin：
- 请求方法：GET、POST 或 HEAD。
- Content-Type：限于 application/x-www-form-urlencoded、multipart/form-data 或 text/plain。
- 不包含自定义头：如 Authorization。
看以下 Express 示例：
// 假设 web 端位于 http://localhost:3000
// 假设 server 端位于 http://localhost:5050
// web
fetch("http://localhost:5000/api/posts", { method: "GET" });
// server
app.use((req: Request, res: Response, next: NextFunction) => {
res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000"); // 或者 res.setHeader("Access-Control-Allow-Origin", "");
next();
});
复杂请求
符合以下任意一条，即为复杂请求：
- 使用 PUT、DELETE 、PATCH 方法。
- Content-Type: application/json。
- 包含自定义请求头（如 Authorization）。
复杂请求比较特殊，浏览器会先发送一个 OPTIONS 方法的预检请求（Preflight），检查服务器是否允许该跨域请求。如果不允许，则直接抛出 CORS 错误，不再发送实际请求。
CORS 错误
因此，我们需要单独处理这个预检请求（Preflight）：
CodeBlock Loading...
设置 Access-Control-Max-Age
复杂请求在无缓存或缓存失效时会发送两次请求：Preflight（OPTIONS）和实际请求，这会增加网络开销。为此，服务器可以通过设置 Access-Control-Max-Age 响应头来控制浏览器缓存预检结果的时长。这个头字段的值表示缓存的有效期（以秒为单位）。在缓存有效期内，浏览器会复用之前的预检结果，跳过对相同接口的 Preflight 请求，从而提升性能。
CodeBlock Loading...
支持跨域 Cookie 的配置
在跨域场景下，如果后端响应头返回 Set-Cookie，默认不会生效，因为设置 Cookie 需要额外配置以绕过浏览器的安全限制。核心是启用 Access-Control-Allow-Credentials 并明确指定 Access-Control-Allow-Origin。以下是一个 Express 示例：
CodeBlock Loading...
注意这里 Access-Control-Allow-Origin 一定要指定具体的地址，不能设置为 Access-Control-Allow-Origin: *，否则 Cookie 无效。
前端如果使用 fetch 调用，则一定要加上 credentials: "include"否则无法设置 Cookie。如果是 axios 则加上 withCredentials: true。
CodeBlock Loading...