HoRain云--跨域Cookie设置全攻略-开发者社区

app.use(function(req, res, next) { // 必须指定具体域名，不能使用通配符 * res.header('Access-Control-Allow-Origin', 'http://your-frontend-domain.com'); // 允许携带凭证（包括Cookie） res.header('Access-Control-Allow-Credentials', true); // 允许的请求方法 res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); // 允许的请求头 res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization'); next(); });

2. PHP 示例

<?php // 允许特定域名的跨域请求 header("Access-Control-Allow-Origin: http://your-frontend-domain.com"); // 允许包含cookie header("Access-Control-Allow-Credentials: true"); // 允许的请求方法 header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE"); // 允许的请求头 header("Access-Control-Allow-Headers: Content-Type, Authorization"); // 处理预检请求（OPTIONS） if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') { header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE"); header("Access-Control-Allow-Headers: Content-Type, Authorization"); exit; }

3. Next.js 中间件配置

// middleware.ts import { NextResponse } from 'next/server' import type { NextRequest } from 'next/server' export function middleware(request: NextRequest) { const response = NextResponse.next() // 设置CORS头 response.headers.set('Access-Control-Allow-Origin', 'https://your-frontend-domain.com') response.headers.set('Access-Control-Allow-Credentials', 'true') response.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS') response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization') // 处理预检请求 if (request.method === 'OPTIONS') { return new Response(null, { status: 200, headers: response.headers }) } return response } export const config = { matcher: '/api/:path*' }

三、客户端配置

1. Fetch API

fetch('https://your-api-domain.com/data', { credentials: 'include' // 关键：允许发送Cookie }) .then(response => response.json()) .then(data => console.log(data));

2. XMLHttpRequest

const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://your-api-domain.com/data', true); xhr.withCredentials = true; // 关键：允许发送Cookie xhr.send();

3. Axios

axios.get('https://your-api-domain.com/data', { withCredentials: true // 关键：允许发送Cookie }) .then(response => console.log(response.data));

四、Cookie属性要求

服务器设置Cookie时，必须满足以下条件：

必须启用Secure属性（通过HTTPS传输）：

Set-Cookie: sessionId=abc123; Secure; SameSite=None; Path=/

必须设置SameSite=None：

Set-Cookie: sessionId=abc123; Secure; SameSite=None; Path=/

避免使用HttpOnly（如需前端JavaScript读取Cookie）：

Set-Cookie: sessionId=abc123; Secure; SameSite=None; Path=/; HttpOnly

五、常见问题解决

1. 错误：Access-Control-Allow-Origin 不能为通配符 *

原因：当启用Access-Control-Allow-Credentials: true时，Access-Control-Allow-Origin必须明确指定域名。

解决：使用具体域名或动态验证Origin

const allowedOrigins = ['http://your-frontend-domain.com', 'https://admin.your-frontend.com']; const origin = request.headers.get('origin'); if (allowedOrigins.includes(origin)) { res.setHeader('Access-Control-Allow-Origin', origin); }