跨域限制？来跟我试试无视跨域获取第三方接口数据的新方法

前端

2023-05-18 01:19:50

如何在 Chrome 扩展程序的帮助下轻松绕过 CORS 限制

在前端开发中，跨域限制经常阻碍着我们从其他网站获取数据，这主要是出于安全考虑，以防止恶意网站窃取敏感信息。但是，有时候我们确实需要从其他域上的第三方 API 获取数据，这时候就需要一些技巧来绕过跨域限制了。

无视 CORS 限制的新途径

其中一种绕过 CORS 限制的方法就是使用 Chrome 扩展程序，这类扩展程序可以帮助我们在浏览器中添加新的功能，比如跨域请求。

使用 Chrome 扩展程序无视 CORS 限制的步骤

要使用 Chrome 扩展程序无视 CORS 限制，请按照以下步骤操作：

安装 "Allow CORS: Access-Control-Allow-Origin" 扩展程序。
打开你想访问的网站。
点击扩展程序图标并选择 "Allow CORS: Access-Control-Allow-Origin"。
刷新页面。

注意事项

在使用 Chrome 扩展程序绕过 CORS 限制时，需要注意以下几点：

仅在开发或测试环境中使用此方法。在生产环境中，请使用更安全的方法来绕过 CORS 限制。
某些网站可能启用了跨域请求保护，因此你可能无法使用此方法绕过 CORS 限制。
此方法可能会降低浏览器的性能。

替代方法

除了使用 Chrome 扩展程序之外，还有其他方法可以绕过 CORS 限制，包括：

JSONP（JSON with Padding）： 这是一种使用 <script> 标签进行跨域数据传输的方法。
CORS 代理： 这是一种通过服务器转发跨域请求的方法。
Preflight 请求： 这是一种允许浏览器在实际请求之前发送预检请求以验证 CORS 标头的方法。

代码示例

如果你想使用 Chrome 扩展程序无视 CORS 限制，可以使用以下代码：

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.method === "fetch") {
    fetch(request.url, {
      method: request.method,
      headers: request.headers,
      body: request.body
    })
    .then(function(response) {
      sendResponse({
        status: response.status,
        headers: response.headers,
        body: response.body
      });
    })
    .catch(function(error) {
      sendResponse({ error: error });
    });
  }
});