客户端侧CORS解锁工具的工作原理是什么？

首先要明确：这类网站并非在客户端侧实现CORS解锁，本质是通过服务端反向代理绕开浏览器的跨域限制，具体流程如下：

核心逻辑 #

• 你的前端代码不再直接请求目标站点，而是将目标URL编码后传给代理网站的服务器；
• 代理服务器作为服务端发起HTTP请求去获取目标站点的资源（服务端之间的请求不受浏览器CORS规则约束）；
• 代理服务器拿到目标资源的响应后，在响应头中添加Access-Control-Allow-Origin: *（或适配请求源的具体值）；
• 最后将修改过头的响应返回给你的前端，浏览器看到合法的CORS响应头，就允许前端读取响应内容。

代码对比说明 #

未使用代理的跨域请求（会失败） #

因为目标站点未配置Access-Control-Allow-Origin响应头，浏览器会拦截前端的跨域请求：

let url = 'https://tv.jordkris.com';
fetch(url).then(res => res.text())
.then((text) => {
  var parser = new DOMParser();
  var html = parser.parseFromString(text, "text/html");
  var target = document.getElementById('target');
  target.innerHTML = text;
})
.catch(err => console.error(err.message));

<div id="target"></div>

使用代理的请求（可成功） #

前端请求代理服务器，由代理服务器完成目标资源的获取并添加合法CORS头：

let url = 'https://corsproxy.io/?' + encodeURIComponent('https://tv.jordkris.com');
fetch(url).then(res => res.text())
.then((text) => {
  var parser = new DOMParser();
  var html = parser.parseFromString(text, "text/html");
  var target = document.getElementById('target');
  target.innerHTML = text;
})
.catch(err => console.error(err.message));

<div id="target"></div>

补充说明 #

这类代理网站的本质是替前端完成了原本需要目标站点服务端做的CORS配置工作——通过代理中转，将跨域请求转化为前端与代理服务器之间的同域请求，再由代理服务器补全CORS响应头来满足浏览器的跨域规则。

内容的提问来源于stack exchange，提问作者Jordy