在 Chrome 中使用 XMLHttpRequest 获取对 URL 的查询答案

【问题标题】：GET query to URL using XMLHttpRequest in Chrome在 Chrome 中使用 XMLHttpRequest 获取对 URL 的查询
【发布时间】：2013-07-14 22:26:58
【问题描述】：

我正在尝试直接使用 XMLHttpRequest 检索 url：

req = new XMLHttpRequest
req.onreadystatechange = -> 
  console.log req.readyState
  if req.readyState == 1
    console.log "sending..."
    req.send
  if req.readyState == 4
    handler(req.response, req.status)
req.open("GET", info.srcUrl, true)
req.responseType = "arraybuffer"

但我从来没有看到对象转换超出1 readyState。我错过了什么？

【问题讨论】：

你正在运行的页面的源 URL 是什么，以及 info.srcUrl 的值是什么？您是否从与运行此代码的页面相同的主机名/端口检索内容？
不，这是对任何 Web 服务器的任意请求。具体来说，我正在处理图像，但这并不重要。
@jabalsad - 为什么不重要？浏览器不会让你这样做。但是，如果你想要一张图片，请使用图片标签——它会让你这样做。
@Hogan 我不一定想在浏览器上显示图像。我正在尝试从 url 检索资源并以某种方式操作数据。

标签： javascript google-chrome-extension coffeescript

【解决方案1】：

如果您尝试从接收运行脚本的服务器以外的其他来源检索任意资源，则很可能遇到与跨站点脚本相关的安全问题。

除了在非常有限的情况下，您无法从任何其他站点检索资源，但您当前正在查看的页面提供服务的站点除外。

解释见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript?redirectlocale=en-US&redirectslug=JavaScript%2FSame_origin_policy_for_JavaScript

关于我上面提到的有限情况，见https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS?redirectlocale=en-US&redirectslug=HTTP_access_control

此外，由于您似乎没有为您的 XMLHTTPRequest 提供错误处理程序，因此您很可能错过了告知您请求失败原因的错误消息。

更新

有关 XMLHTTPRequest 的快速教程，包括如何处理 onError 事件，请参见 https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest?redirectlocale=en-US&redirectslug=DOM%2FXMLHttpRequest%2FUsing_XMLHttpRequest

【讨论】：

哎呀，我忘了提。我正在通过 chrome 扩展程序执行此操作，并且我授予了 https://*/ 和 http://*/ 的权限。感谢您提供有关错误处理程序的信息，这可能是我错过的。这很奇怪，因为当我使用 jQuery.get() 方法时它可以工作。
也许您可以指出我应该在哪里进行错误处理？我没有在文档中看到提到它的示例。
@jabalsad 如果在模式末尾附加通配符。 http://*/ 只匹配网站的根目录，http://*/* 匹配所有 http 网站。见match patterns。
@RobW jQuery.get() 怎么能成功呢？
@RobW 我理解 CORS 背后的概念。我的观点是使用 jQuery.get 或 jQuery.ajax 的 GET 请求成功，但如果我直接使用 XMLHttpRequest 对同一 URL 执行请求，它不会成功。这似乎与 CORS 无关，因为 jQuery 只是 XMLHttpRequest 的包装器？

【解决方案2】：

来自 Ruby，我没有意识到 req.send 和 req.send() 之间存在细微但重要的区别。正如@RobW 在 cmets 中指出的那样，此方法也不应在事件处理程序中调用，而应在代码末尾调用。

【讨论】：