企业官网建设流程全解析

郑州做网站外包的公司,团购网站功能模块,甘肃兰州市,17做网店一件代发#x1f3ac; HoRain 云小助手#xff1a;个人主页 ⛺️生活的理想#xff0c;就是为了理想的生活! ⛳️ 推荐 前些天发现了一个超棒的服务器购买网站#xff0c;性价比超高#xff0c;大内存超划算#xff01;忍不住分享一下给大家。点击跳转到网站。 目录 ⛳️ 推荐 … HoRain 云小助手个人主页⛺️生活的理想就是为了理想的生活!⛳️ 推荐前些天发现了一个超棒的服务器购买网站性价比超高大内存超划算忍不住分享一下给大家。点击跳转到网站。目录⛳️ 推荐如何使用CORS来允许设置Cookie一、关键配置条件二、服务器端配置1. Node.js (Express) 示例2. PHP 示例3. Next.js 中间件配置三、客户端配置1. Fetch API2. XMLHttpRequest3. Axios四、Cookie属性要求五、常见问题解决1. 错误Access-Control-Allow-Origin 不能为通配符 *2. Cookie未随请求发送3. 预检请求OPTIONS失败六、重要注意事项如何使用CORS来允许设置Cookie要实现跨域请求中携带和设置Cookie需要正确配置CORS跨源资源共享的服务器端和客户端。以下是完整指南一、关键配置条件要成功实现跨域Cookie传递必须同时满足以下三个条件服务器端设置Access-Control-Allow-Credentials: true服务器端指定具体域名不能使用*Access-Control-Allow-Origin: http://your-domain.com客户端设置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 APIfetch(https://your-api-domain.com/data, { credentials: include // 关键允许发送Cookie }) .then(response response.json()) .then(data console.log(data));2. XMLHttpRequestconst xhr new XMLHttpRequest(); xhr.open(GET, https://your-api-domain.com/data, true); xhr.withCredentials true; // 关键允许发送Cookie xhr.send();3. Axiosaxios.get(https://your-api-domain.com/data, { withCredentials: true // 关键允许发送Cookie }) .then(response console.log(response.data));四、Cookie属性要求服务器设置Cookie时必须满足以下条件必须启用Secure属性通过HTTPS传输Set-Cookie: sessionIdabc123; Secure; SameSiteNone; Path/必须设置SameSiteNoneSet-Cookie: sessionIdabc123; Secure; SameSiteNone; Path/避免使用HttpOnly如需前端JavaScript读取CookieSet-Cookie: sessionIdabc123; Secure; SameSiteNone; Path/; HttpOnly五、常见问题解决1. 错误Access-Control-Allow-Origin 不能为通配符 *原因当启用Access-Control-Allow-Credentials: true时Access-Control-Allow-Origin必须明确指定域名。解决使用具体域名或动态验证Originconst 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: trueCookie是否包含Secure和SameSiteNone是否通过HTTPS访问本地开发需使用https://localhost3. 预检请求OPTIONS失败解决确保服务器正确处理OPTIONS请求并返回CORS头六、重要注意事项必须使用HTTPS当设置SameSiteNone时Cookie必须通过HTTPS传输避免使用通配符当启用凭证时Access-Control-Allow-Origin不能为*安全最佳实践使用动态Origin验证而不是硬编码特定域名通过以上配置你可以在跨域请求中正确设置和传递Cookie实现跨域认证和用户状态保持。❤️❤️❤️本人水平有限如有纰漏欢迎各位大佬评论批评指正如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢! Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧