chrome禁止三方cookie，网站登录不了怎么办 (2)

2.) node代理服务

---`:8001`--- <script type="text/javascript"> var appHost = "http://127.0.0.1:8000"; function login(event) { // 调用代理服务登录接口 $.ajax({ type : "POST", contentType: "application/json", data: JSON.stringify(event.data.payload), url : "/login", success : function(result) { event.source.postMessage(result, event.origin); // 调用成功，发送返回数据给用户页面 }, error : function(e){ event.source.postMessage(e, event.origin); } }); } function receiveMessage(event) { if (event.origin !== appHost) { return; } if (event.data.url === '/login') { login(event); } } window.addEventListener("message", receiveMessage, false); </script> ---代理服务脚本--- ...... const CORS_HEADER = { 'Access-Control-Allow-Origin': 'http://127.0.0.1:8000', 'Access-Control-Allow-Headers': 'Content-Type, _cookie', 'Access-Control-Allow-Credentials': 'true', }; ...... function sendProxyRequest(req, res) { const { method, headers, url } = req; const chunks = []; if(Object.hasOwnProperty.call(headers, '_cookie')) { // 包含自定义_cookie请求头，重新设置cookie headers.cookie = headers._cookie; } req.on('data', (chunk) => { chunks.push(chunk); }); req.on('end', () => { const request = http.request({ // 发送请求到后端服务 host: '127.0.0.1', port: 8002, path:url, method, headers, }, (response) => { res.writeHead(response.statusCode, { ...CORS_HEADER, ...response.headers, }); response.pipe(res); }); request.end(Buffer.concat(chunks).toString()); }); }

3.) 后端服务

...... const { method, headers, url } = req; const _method = method.toLowerCase(); if (url === '/login' && _method === 'post') { // 登录验证 const chunks = []; req.on('data', (chunk) => { chunks.push(chunk); }); req.on('end', () => { const result = { code: -1, message: 'login fail', }; const resHeaders = { 'Content-Type': 'text/json', }; const { name, pass } = JSON.parse(Buffer.concat(chunks).toString()); if (name === '123' && pass === 'abc') { // 这里只校验123&abc这种情况 result.code = 0; result.message = 'login success'; resHeaders['Set-Cookie'] = `sid=abc; Max-Age=${getCookieExpires()};`; // 设置cookie } res.writeHead(200, resHeaders); res.end(JSON.stringify(result)); }); ...... return; } if (url === '/fetchUser' && _method === 'post') { // 用户信息查询 if (req.headers.cookie === 'sid=abc') { // 校验cookie res.writeHead(200, { 'Content-Type': 'text/json', }); ...... } else { res.writeHead(401); res.end(); } return; } 总结

第四种方法可以不修改后端服务，微调前端项目即可，因此对于现有项目改造成本较低，但是需要维护一个node服务代理，上面的示例演示了http协议，对于https站点，只需要稍微修改下node代理服务即可(https模块+根证书)，最后再说一点，在前后端分离模式下，开发过程中遇到这样的问题，可以设置webapck的服务代理，具体可参考资料【4】，本文就讲到这里，大家如果有更好的解决方案，欢迎留言交流。

参考资料
【1】
【2】https://www.cnblogs.com/Summer6/p/11671204.html
【3】https://juejin.im/post/6844904128557105166
【4】https://www.yuque.com/mdtvv0/myv5bw/es2oeo

福禄ICH·架构组 福袋