电子删除 CORS - JavaScript

什么是 CORS

CORS（跨源资源共享）是一种浏览器机制，它允许 Web 应用程序或脚本访问其他域的资源。CORS 跨域策略限制了从脚本发出的 HTTP 请求只能访问与加载初始 Web 页面的域名相同的资源。如果您尝试在 JavaScript 代码中从一个不同的域名向另一个域名发出 AJAX 请求，您将会收到一个安全错误。

解决 CORS 的方法

服务器端

服务器端可以在响应头中添加 "Access-Control-Allow-Origin: *" 头来启用 CORS。星号表示允许任何来源的访问。例如，在 Node.js 中 Express 应用程序的代码中，可以这样来处理 CORS：

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

浏览器端

如果您没有办法控制服务器端，或者您希望通过浏览器来解决跨域问题，您可以使用代理服务器或 JSONP。

代理服务器

代理服务器是一个中间层服务器，它将从客户端发出的请求转发到目标服务器，并将从目标服务器返回的响应转发回客户端。客户端只与代理服务器通信，代理服务器再与目标服务器通信。在开发过程中，您可以使用 webpack-dev-server 或 http-proxy-middleware 等工具来启用代理服务器。

JSONP

JSONP（JSON with Padding）是一种在 HTML 页面上使用的跨域技术。JSONP 通过动态地向页面中插入 script 元素来回传调用函数的结果。服务器返回的结果必须是一个函数调用，该函数调用会带着数据作为参数。例如：

<script src="http://example.com/api?callback=myCallback"></script>
<script>
  function myCallback(data) {
    console.log(data);
  }
</script>

电子删除 CORS

电子删除 CORS（Electronic Removal of CORS）是一种在浏览器中使用脚本自动删除 CORS 头的技术。它通过注入一个简单的 JavaScript 脚本到页面中，来自动删除所有出站请求的 CORS 头。

(function() {
  var send = XMLHttpRequest.prototype.send;
  XMLHttpRequest.prototype.send = function() {
    this.setRequestHeader("Origin", "");
    send.apply(this, arguments);
  };
})();

您可以将以上代码放在 JavaScript 文件中，在页面中引入该文件即可。

结论

CORS 是 Web 应用程序中的一个常见问题。服务器端可以通过在响应头中添加 "Access-Control-Allow-Origin: *" 来启用 CORS，而客户端可以使用代理服务器或 JSONP 来解决跨域问题。另外，电子删除 CORS 可以去掉所有出站请求的 CORS 头，让开发者更加方便地处理跨域问题。