2021-07-21 前端跨域携带cookie问题

Posted 2023-03-03

参考技术A Access-Control-Allow-Origin为*的时候，前端设置withCredentials：true，将不能发送cookie到服务端。

此外，前端要发送cookie到服务端，还要 XMLHttpRequest 的 withCredentials 标志设置为 true，且

服务器端的响应中未携带 Access-Control-Allow-Credentials: true。

XMLHttpRequest 的 withCredentials 标志设置为 true，是为了客户端向服务端发送cookie，

响应中Access-Control-Allow-Credentials: true，是为了客户端能够接收cookie，无此标记，浏览器将不会把响应内容返回给请求的发送者。

因此，前端要携带cookie到服务端，需要三个条件：

新标准中提供了文档之间直接的消息传输API。而且不限制跨域消息传递！
发送消息使用的是Window对象的postMessage(data,targetURL)方法就可以了，但给哪个window对象发送消息，就使用哪个window的实例来调用，注意这个细节。
文档默认监听一下message事件就可以接受消息了：window.addEventListener("message", function (ev) );
监听消息事件：ev两个重要属性：ev.source指向发送消息的源window对象，ev.data来获取收到的消息数据

多线程技术在服务端技术中已经发展的很成熟了，而在Web端的应用中却一直是鸡肋
在新的标准中，提供的新的WebWork API，让前端的异步工作变得异常简单。
使用：创建一个Worker对象，指向一个js文件，然后通过Worker对象往js文件发送消息，js文件内部的处理逻辑，处理完毕后，再发送消息回到当前页面，纯异步方式，不影响当前主页面渲染。