企业官网建设流程全解析

🎬 HoRain 云小助手：个人主页

⛺️生活的理想，就是为了理想的生活!

⛳️ 推荐

前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。

目录

⛳️ 推荐

如何使用CORS来允许设置Cookie

一、关键配置条件

二、服务器端配置

1. Node.js (Express) 示例

2. PHP 示例

3. Next.js 中间件配置

三、客户端配置

1. Fetch API

2. XMLHttpRequest

3. Axios

四、Cookie属性要求

五、常见问题解决

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

2. Cookie未随请求发送

3. 预检请求（OPTIONS）失败

六、重要注意事项

如何使用CORS来允许设置Cookie

要实现跨域请求中携带和设置Cookie，需要正确配置CORS（跨源资源共享）的服务器端和客户端。以下是完整指南：

一、关键配置条件

要成功实现跨域Cookie传递，必须同时满足以下三个条件：

1. 服务器端：设置Access-Control-Allow-Credentials: true
2. 服务器端：指定具体域名（不能使用*）：Access-Control-Allow-Origin: http://your-domain.com
3. 客户端：设置withCredentials: true

二、服务器端配置

1. Node.js (Express) 示例

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时，必须满足以下条件：

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

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

2. 必须设置SameSite=None：

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

3. 避免使用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); }

2. Cookie未随请求发送

检查点：

• 服务器是否返回Access-Control-Allow-Credentials: true？
• 客户端是否设置withCredentials: true？
• Cookie是否包含Secure和SameSite=None？
• 是否通过HTTPS访问（本地开发需使用https://localhost）

3. 预检请求（OPTIONS）失败

解决：确保服务器正确处理OPTIONS请求并返回CORS头

六、重要注意事项

1. 必须使用HTTPS：当设置SameSite=None时，Cookie必须通过HTTPS传输
2. 避免使用通配符：当启用凭证时，Access-Control-Allow-Origin不能为*
3. 安全最佳实践：使用动态Origin验证，而不是硬编码特定域名

通过以上配置，你可以在跨域请求中正确设置和传递Cookie，实现跨域认证和用户状态保持。

❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍

🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙