从不存在“Access-Control-Allow-Origin”标头的资源中获取状态代码

Posted 2023-03-04

【中文标题】从不存在“Access-Control-Allow-Origin”标头的资源中获取状态代码

【英文标题】：getting status code from resource with No 'Access-Control-Allow-Origin' header present

【发布时间】：2017-04-06 21:25:13

【问题描述】：

我正在使用良好的 'ol 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 正在做什么来获取网络选项卡上的预期状态代码？”

【问题讨论】：

在这里测试。就我而言，一切都返回 301 http 状态码。你可以在这里发布你的 xmlHttpRequest 代码吗？

@BrunoPeres - 添加到问题中。我只是一个简单的原始 xmlhttprequest，同步的，但我认为这不会改变任何事情

我刚刚在 chrome 的控制台中运行了该代码，将 username 替换为“9gag”，并在网络选项卡上返回了 200

确认 Instagram 用户名存在不足以验证状态码 == 200 到 onreadystatechange？我相信我没有很好地理解你的问题。你不能发布更多的细节吗？对不起。

@BrunoPeres 我实际上没有在我的应用程序中获得状态代码。每当我发出请求时，我只会在 chrome 的网络选项卡上看到状态代码，而且我无法理解如何从不允许 cors 的资源中获取浏览器中的状态代码。另一方面，我用 Firefox 对此进行了测试，得到了 301。

【参考方案1】：

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

CORS 本身有点令人困惑 - 如果服务器可以正常完成请求，为什么浏览器会阻止它？不过好吧，这是一个以向后兼容的方式粘贴的安全限制。

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

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