javascript - 从不存在 'Access-Control-Allow-Origin' header 的资源获取状态代码

Question

我正在使用良好的 XMLHttpRequest 向 https://www.instagram.com/USERNAME 发出 GET 请求。我的目标是确认我的用户输入的 Instagram 用户名确实存在，如果我可以在客户端确认这一点，那就太好了。

例如，尝试向 https://www.instagram.com/9gag 发出 GET 请求然后你会得到 200 的退款。 https://www.instagram.com/sakjafkhdsafd然后你会得到一个 404 返回。

现在，现在...似乎 Instagram 不允许 CORS...因为当我运行 XMLHttpRequest.send() 时，我收到以下错误:

XMLHttpRequest cannot load https://www.instagram.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

好吧，我猜服务器必须处理这个问题......但是!如果我检查网络选项卡，我实际上会看到正在发出请求，并且收到带有预期状态代码的响应。我还得到了所有的 html，一切。这是什么……？

浏览器(在我的例子中是 Chrome)如何能够捕获此内容，但不能捕获我的应用程序？

根据要求添加我的代码:

var xhr = new XMLHttpRequest();

xhr.open("GET", "https://www.instagram.com/" + username, false);
xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
           // do something...
        }
    }
xhr.send()

编辑:

我刚刚在 Firefox 上测试了这个，并得到了 301 返回。我想我现在的问题是“chrome 正在做什么才能在网络选项卡上获取预期的状态代码？”

Answer 1

虽然浏览器已成功检索内容，但由于CORS而禁止您阅读任何内容。 .

CORS 本身有点令人困惑 - 如果服务器可以满足请求，为什么浏览器会阻止它？但是没关系，这是一个以向后兼容的方式粘贴的安全限制。

更令人惊讶的是，即使对于错误也是如此:服务器必须在其响应中添加一个特殊的 header ，甚至允许客户端读取状态代码或错误消息!

但浏览器将在浏览器控制台和网络选项卡中显示这些内容。