jQuery 如何绕过 Access-Control-Allow-Origin

在本文中，我们将介绍如何使用jQuery绕过Access-Control-Allow-Origin跨域限制问题。当一个网页需要从不同的域名获取资源时，由于浏览器的同源策略（Same-Origin Policy），一般情况下是不允许的。但是有时候我们需要绕过这个限制，那么jQuery就可以帮助我们实现。

阅读更多：jQuery 教程

了解Access-Control-Allow-Origin跨域问题

跨域是指在客户端浏览器内，使用的JavaScript代码无法请求当前源以外的资源。例如，在网站A的页面中使用Ajax请求网站B的数据，由于源不同，浏览器会阻止这个请求。这是出于安全考虑，防止恶意的跨站请求伪造攻击（Cross-Site Request Forgery）。

Access-Control-Allow-Origin是一个响应头，由服务端返回给浏览器，用于标识哪些域名是被允许跨域请求的。一般情况下，服务器会返回一个具体的域名或通配符”*”，表示允许所有的域名进行跨域请求。

使用jQuery绕过Access-Control-Allow-Origin限制

一种常用的绕过Access-Control-Allow-Origin限制的方法是使用代理服务器。我们可以在本地搭建一个代理服务器，将客户端的请求转发到目标服务器上，并在代理服务器上设置Access-Control-Allow-Origin头为”*”，这样我们就可以绕过浏览器的同源策略。

下面是一个使用jQuery和Node.js搭建代理服务器的示例:

// proxy.js
const http = require('http');
const request = require('request');

const server = http.createServer((req, res) => {
  const url = 'http://目标服务器地址' + req.url;
  req.pipe(request(url)).pipe(res);
});

server.listen(3000, () => {
  console.log('Proxy server is listening on port 3000');
});

在终端使用Node.js运行该脚本后，代理服务器会在本地监听3000端口。然后我们可以使用jQuery发起跨域请求，请求目标服务器上的资源，如下所示:

// index.html
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    (document).ready(function() {.ajax({
        url: 'http://localhost:3000/目标服务器资源路径',
        success: function(response) {
          console.log(response);
        }
      });
    });
  </script>
</head>
<body>
</body>
</html>