浏览器跨域请求中，要让请求携带 Cookie，需要同时在前端和后端进行配置。以下是实现的方法：
前端配置
在前端代码中使用 fetch 或 Axios 发起请求时，需要设置 credentials 属性：
1. Fetch 示例
fetch('https://example.com/api', {
method: 'GET', // 或 POST 等其他请求方式
credentials: 'include', // 表示发送跨域请求时携带 Cookie
headers: {
'Content-Type': 'application/json',
},
});
2. Axios 示例
import axios from 'axios';
axios.defaults.withCredentials = true; // 设置全局默认携带 Cookie
axios.post('https://example.com/api', {
data: { key: 'value' },
});
后端配置
在后端需要允许跨域请求，并确保 Cookie 能够正常传递。
1. 设置 Access-Control-Allow-Origin
- 将前端的域名添加到允许的跨域源中。
- 不允许使用
*，因为携带Cookie时要求指定具体域名。
示例（Node.js / Express）
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', 'https://your-frontend-domain.com'); // 前端域名
res.header('Access-Control-Allow-Credentials', 'true'); // 允许发送 Cookie
res.header('Access-Control-Allow-Headers', 'Content-Type'); // 根据需要添加其他头
next();
});
示例（Spring Boot）
@CrossOrigin(origins = "https://your-frontend-domain.com", allowCredentials = "true")
@RestController
public class MyController {
// 你的接口逻辑
}
2. 设置 Set-Cookie 响应头
后端需要确保在响应中设置正确的 Set-Cookie，同时指定：
SameSite=None（允许跨站携带 Cookie）。Secure（要求在 HTTPS 下传递）。
示例（Express）
res.cookie('myCookie', 'cookieValue', {
httpOnly: true,
secure: true, // 必须在 HTTPS 环境下使用
sameSite: 'None', // 跨站点传递
});
示例（Spring Boot）
ResponseCookie cookie = ResponseCookie.from("myCookie", "cookieValue")
.httpOnly(true)
.secure(true)
.sameSite("None")
.path("/")
.build();
response.addHeader(HttpHeaders.SET_COOKIE, cookie.toString());
注意事项
- 跨域和 Cookie 安全性
- 确保前后端都使用 HTTPS。
- 在生产环境中将 Cookie 设置为
httpOnly和secure。
- 浏览器限制
- 检查浏览器是否禁用了第三方 Cookie（现代浏览器可能默认阻止跨站点的 Cookie）。
- 调试
- 使用浏览器的开发者工具查看请求和响应，确保：
- 请求头中有
Cookie。 - 响应头中包含正确的
Set-Cookie。
- 请求头中有
- 使用浏览器的开发者工具查看请求和响应，确保：
完成以上配置后，跨域请求应能够正常携带 Cookie。
发布者：myrgd，转载请注明出处：https://www.object-c.cn/5158
