在 Chrome 中替换服务器 JSON 响应

Question

我遇到了一些以 AJAX 方式向服务器查询 JSON 数据的基于 Web 的工具的问题。它无法正常工作 - 返回的结果通常不是我想要的，我需要等待很多时间让服务器处理请求。

事实上，我总是希望返回相同的数据（准确地说是几个人），所以我想到了伪造服务器响应。我尝试了几种方法来实现这一点，但没有成功。

我尝试使用 Chrome 的 WebRequest 功能 - 我准备了一个扩展并将请求重定向到我的 JSON 编码的数据 URL。它有效，但只有当我在 Chrome 的地址字段中手动输入地址时。当 Web 应用程序尝试访问该地址时，重定向静默失败。我立即想到了 Access Origin 限制，并迅速设置了一个发送 Access-Control-Allow-Origin 标头的 Web 服务器。

不幸的是，这也不起作用。当我手动输入地址时，正在查询服务器并返回正确的 JSON，但在应用程序中请求......默默地失败了。看起来 Chrome 完全忽略了可能的 Access-Control-Allow-Origin 标头，因为它甚至没有查询服务器。 Chrome 很可能只分析 URL，因为当我将有问题的请求重定向到应用程序域中的随机 URL 时它起作用了。

我还尝试使用相同的方法伪造应用程序的整个 JavaScript 文件 - 该文件静态链接到文档（例如，它通过标准脚本标签包含）。我失败得很惨——重定向只是默默地失败了，就像我第一次尝试失败一样。

我的问题的一个常见解决方案是使用某种代理来更改服务器输出，但我不能这样做 - 我不想等待几分钟让服务器处理请求。顺便说一句，该应用程序只能通过 HTTPS 访问。

有没有其他方法可以使用我的硬编码 JSON 来提供应用程序？或者我错过了什么？

编辑 插件代码，基于“catblock”示例：

chrome.webRequest.onBeforeRequest.addListener(
function(info) {
  console.log("AJAX call intercepted: " + info.url)
  return {redirectUrl: 'data:application/json,"test"'};
},
// filters
{
  urls: [
  "*://address.to.the.js.file.requested"
]
}, ['blocking']);

清单文件，我只将域添加到权限部分：

{
"name": "CatBlock",
"version": "1.0",
"description": "I can't has cheezburger!",
"permissions": ["webRequest", "webRequestBlocking", 
              "*://some.domain.com/*"],
"background": {
  "scripts": ["background.js"]
},

"manifest_version": 2
}

编辑 2： 以下是 Chrome 开发者控制台网络面板的屏幕截图，显示请求被静默取消：

Answer 1

有几种方法可以做到这一点。

最简单的方法是使用Fiddler 如果你懂俄语，或者你的浏览器有不错的翻译功能，你可以阅读这个article——据我所知，在你的情况下你需要第二部分——关于自动回复。 或者下面有几个英文手册的链接。

这个截图就是答案

关于 chrome 中的 Access-Control-Allow-Origin - 我的 extension 也非常简单（只需添加到响应标题“Access-Control-Allow-Origin：*”）并允许您在开发时避免此错误特征。你可以用 Fiddler 做同样的事情 同样在 chrome 中，您可以使用开发人员密钥“chrome --disable-web-security”运行 Chrome 它也消除了“Access-Control-Allow-Origin”的错误

Answer 2

如果我理解正确，您 可以控制生成 JSON 响应的服务器。 如果是这种情况，那么必须有可能 - 没有任何 Chrome 扩展 - 让 AJAX (XMLHTTPRequest) 请求和响应使用正确的 CORS 标头。

根据我的经验，失败的跨域 XHR 请求仅似乎在 Chrome 中“静默”失败，但如果您仔细查看控制台，您会看到一条错误消息 类似于：

XMLHttpRequest 无法加载 http://example.com/yourJSONfile.json。 Access-Control-Allow-Origin 不允许来源http://your-app-domain.com:80。

此消息有时可能会产生误导，因为如果 任何事情 CORS 相关出现错误（即使 Access-Control-Allow-Origin 设置正确），它也会显示出来。 此外，在网络选项卡上，您将看到 XHR 请求和响应标头。

现在让我们谈谈 CORS 标头。我必须查看您请求的 AJAX 选项或 HTTP 请求标头才能准确说明您需要哪些 CORS 标头，但据我现在所知，“Access-Control-Allow-Origin: *”可能不足以满足您的要求成功： 根据您的请求标头（我目前不知道，因此以下只是示例），您可能需要额外的 CORS 标头，例如：

"Access-Control-Allow-Methods": "OPTIONS, GET, POST"

“Access-Control-Allow-Headers”：“内容类型，接受，来源”

此外，出于调试目的，启用：

"Access-Control-Expose-Headers": "Access-Control-Allow-Origin"

这样您就可以在网络选项卡上看到与 CORS 相关的响应标头。