新版浏览器将全面禁止三方，到时候怎么设置都不起作用了？

这个主要看运维和后端处理，但是这个方法在以后的新版浏览器中可能会失效，因为未来两年浏览器会彻底封禁第三方，不管怎么设置届时将无法使用；

4.代理服务

如果以上方法都不满足，可以考虑使用node作为-的中间层。总体设计如下：

前端项目和代理服务位于同一台服务器上，协议和域名相同，但端口不同。为什么要设计成便于共享，因为协议和端口是不区分的，所以只要域名（或ip）相同，那么在同一个域名下的一台电脑就可以读取。

还要注意的是，跨域问题是浏览器的安全策略。对于代理服务和后端服务，没有跨域，而是进程间通信。

接下来我们实现一个比较简单的三方请求示例，其中各个服务的访问地址如下（都是本地模拟，所以proxy和后端服务的ip是一样的，但真实情况是通常不同）：

前端项目::8000

节点代理服务::8001

后端服务::8002

示例演示和流程

1.登录验证

首先需要输入正确的用户信息才能获取，这里我们使用+方法实现跨域登录请求。该过程分为：

1.访问：8000，打开登录界面Chrome 自动升级后，本地项目都无法访问，输入用户名和密码

2.点击登录，登录页面将登录信息发送到:8001页面，该页面获取登录信息并调用:8001/login登录接口

3.向节点代理服务后端请求，然后向真实服务后端发起请求，然后将后端服务的响应返回给前端页面

4.如果验证成功，响应头会携带Set-信息，会写入:8001的字段，同样会写入:8000

2.读取

登录成功后保存在:8000和:8001中，实现共享，可以通过. 如果服务器返回yes，那么可以在代理服务层去掉这个属性，然后再读取。

3.查询数据

发起信息查询时，需要携带登录成功后设置的设置。这里没有使用+方法，直接调用8001的接口服务。但是需要注意的是，因为是跨域脚本请求，所以不会自动携带。信息（即使可以在客户端共享），如果设置了相关属性，还是三方跨域问题，不允许携带，所以需要手动设置请求头（以下划线前缀为前缀），Bring it up。

8001上的proxy在获取到查询请求后，解析请求头的参数，然后重置请求头的参数，发送给真正的后端服务接口。这时候就可以实现验证了。

4.代码实现

文件结构

1.) 前端项目

 

姓名：



密码：



登录

2.) 节点代理服务

---`http://127.0.0.1:8001`---

---代理服务脚本---
......
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;
}

总结

第四种方法是在不修改后端服务的情况下对前端项目进行微调。因此现有项目的改造成本较低，但需要维护一个节点服务代理。上面的例子演示了 http 协议。对于https站点，只需修改节点代理服务（https模块+根证书），最后，在前后端分离的模式下Chrome 自动升级后，本地项目都无法访问，如果在开发过程中遇到这样的问题，可以设置服务代理。详细请参考[4]，这篇文章就是这样，如果你有更好的解决方案，请留言交流。

参考

【1】

【2】

【3】

【4】