困惑于为什么我得到一个跨来源请求被阻止的错误

Question

我知道有几篇关于这个主题的帖子，但我有点困惑，为什么我会收到"Cross Origin Request Blocked:The Same Origin Policy disallow read The remote resource athttp://ipaddress/json.这可以通过将资源移动到同一域或启用CORS来解决。"我正在尝试访问一个Rest API，该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或同一个本地网络上并不重要。所有重要的是，与Ajax调用的URL的来源相比，Javascript运行的网页URL的来源。

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

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

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

---

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

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