对为什么我收到跨域请求被阻止错误感到困惑

Question

我知道有几篇关于这个主题的帖子，但我有点困惑为什么我会收到“跨源请求被阻止：同源策略不允许读取http://ipaddress/json 的远程资源。这可以是通过将资源移动到同一域或启用 CORS 来修复。”我正在尝试访问的 Rest API 当前位于 IP 地址为 xyz 的设备上。这个 Rest API 是我用 C 开发的 CGI 脚本。

现在，我运行此代码的设备也连接到同一个 Wifi，IP 地址为 xyz。那么这是否意味着资源不是远程的，因为它在同一个域下？

这是我的 JavaScript 代码，以防有人好奇。

<button id="submit" onclick="fun()">Click here!</button>

<script language="JavaScript" type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script>
function fun()
{
  $.getJSON('http://ipaddress/json', function(data) 
{
    alert(data.toSource());
    console.log(data);
});
}
</script>

我不一定要求解决这个问题，因为我知道网上有很多，但我更好奇为什么我会遇到这个问题以及我对这个错误的理解有什么错误。我还尝试了其他几个公共 JSON 站点：

使用https://api.github.com/users/mralexgray/repos没有导致这个错误，返回了正确的信息。

但是，使用https://puppygifs.tumblr.com/api/read/json 确实会导致此错误。我假设这可能是因为 GitHub 将 CROS 添加到他们的服务器？

任何理解将不胜感激。

Answer 1

要同源，URL 必须具有相同的协议（例如“http”）、相同的端口和相同的域。如果您在 URL 中使用直接 IP 地址而不是域，则它必须具有相同的 IP 地址。

您在同一个 WiFi 或同一个本地网络上并不重要。重要的是运行 Javascript 的网页的 URL 的来源与您进行 Ajax 调用的 URL 的来源相比。

如果您是同一来源，则请求将在服务器上未启用 CORS 的情况下工作。

如果您不是同一个来源，则服务器必须在浏览器允许 Ajax 调用之前启用 CORS。

如果您看到特定的跨源 ajax 调用有效，那么这些目标服务器必须启用了 CORS。

---

底线：如果您尝试使用 ajax 调用访问您自己的 CGI 脚本，并且您在 URL 中使用 IP 地址，并且执行 Ajax 调用的网页确实也不是来自同一个 IP 地址，那么您需要在 CGI 脚本中添加 CORS 支持，以便浏览器允许发出请求。

或者，将您的 CGI 移动到与网页相同的 IP 地址。