CORS 缺少允许来源：为什么网页可以在我的浏览器中调用 API，但我无法在没有 CORS 错误的情况下调用它？

Question

我知道有关 CORS 的问题已经被问过很多次了。在这种情况下，我想了解该政策的合理性，因为我根本不了解。我也在寻找不在服务器端的任何解决方法。

我正在尝试为 Firefox 编写一个调用 LeetCode API 的扩展。例如，这是我尝试在 JavaScript 中发出的获取请求。

let url = `https://leetcode.com/graphql/?query=query{
    allQuestionsCount {
        difficulty
        count
    }
    matchedUser(username: "lee215") {
        username
    }
}`
const response = await fetch(url);
var data = await response.json();

如果我只是尝试在浏览器中运行此代码，则会收到 CORS 错误，

Reason: CORS header 'Access-Control-Allow-Origin' missing

。

如果我使用 CORS Everywhere 之类的扩展暂时禁用 CORS，则代码可以正常工作。我的问题是我不想这样做。更大的问题是 CORS Everywhere 似乎无法在扩展环境中工作（仅在普通浏览器页面中）。

我想我只是很困惑，为什么在我的浏览器中运行的 leetcode.com 可以调用 API，而我却收到错误？如果任何人都可以读取 API 响应，并且主机的网页可以在我的浏览器上执行 JS 代码，那么为什么此策略会阻止恶意行为者呢？有什么办法可以解决这个问题吗？

Answer 1

请务必记住，SOP（同源策略）会影响浏览器级别的事物。如果我打开恶意站点，我的浏览器将不允许恶意站点上的 JavaScript 访问另一个站点的数据，以阻止它窃取我可能在第二个站点上输入的数据，或对登录的帐户执行操作在第二个站点上。第二个站点可以使用 CORS 标头告诉浏览器可以使用数据，但否则你就不走运了。

扩展程序与网站不同。因为安装它们是用户的选择，而不是用户加载页面后立即运行的东西，所以它们更受信任。扩展程序可以访问其他网站，但您必须遵守一些规则。以下页面提供了有关在扩展中使用 CORS 的更多信息：

带有清单版本 2 的 CORS Chrome 扩展