Polymer项目中Sinon Fake XHR导致locales.json编码异常求助

我之前在使用Sinon模拟请求配合Polymer开发时，也碰到过几乎一模一样的情况！明明已经用filter排除了本地化文件的请求，但启用Sinon后locales.json的返回内容就出现编码错误，禁用Sinon一切正常。下面是我排查和解决的思路，你可以逐一试试：

1. 先确认Filter是否真的生效 #

有时候我们以为filter排除了请求，但实际上可能因为URL带参数（比如locales.json?lang=en）或者路径匹配的细节问题，导致没被正确过滤。建议在filter里加日志验证：

this._server.xhr.addFilter(function(method, url) {
  console.log(`Checking request: ${url}`);
  const isLocaleFile = url.includes("locales.json");
  if (isLocaleFile) {
    console.log("Skipping mock for locale file");
  }
  return isLocaleFile;
});

打开控制台看日志，确认locales.json的请求确实被标记为“跳过模拟”，这样就能排除Sinon误拦截的可能性。

2. 关闭AutoRespond，改用手动触发模拟 #

Sinon的autoRespond: true会自动触发所有被拦截请求的响应，但它可能会干扰原生XHR的异步处理流程（哪怕请求被filter排除）。建议关闭autoRespond，改为在需要模拟Elasticsearch请求时手动调用respond()：

this._server = sinon.fakeServer.create();
// 关闭autoRespond，避免干扰原生请求流程
// this._server.autoRespond = true;
this._server.xhr.useFilters = true;
this._server.xhr.addFilter(function(method, url) {
  return url.includes("locales.json");
});

// 当组件发起Elasticsearch请求后，手动触发模拟响应：
// this._server.respond();

这样能让原生的本地化文件请求按照正常异步流程完成，避免Sinon的自动响应机制打乱节奏。

3. 换用respondWith明确匹配需要模拟的请求 #

相比用filter排除请求，更可靠的方式是直接指定Sinon需要模拟的请求（比如只拦截Elasticsearch的接口），从根源上避免影响其他请求：

this._server = sinon.fakeServer.create();
this._server.autoRespond = true;

// 只拦截Elasticsearch相关的请求，比如你的ES接口前缀是/es/
this._server.respondWith(/^\/es\//, function(xhr) {
  xhr.respond(200, 
    { 'Content-Type': 'application/json; charset=utf-8' }, 
    JSON.stringify(yourMockEsResponse)
  );
});

这种方式更精准，不会出现filter漏判的情况，也能确保本地化文件的请求完全由原生XHR处理。

4. 检查iron-request的响应处理逻辑 #

如果上面的方法都无效，可以看看appLocalizeBehavior依赖的iron-request是否在Sinon环境下处理响应编码有问题。你可以尝试绕过默认逻辑，手动处理locales.json的响应：

// 假设你在组件里加载语言包的代码
this.loadResources(this.resolveUrl('locales.json')).then((response) => {
  // 手动用UTF-8解码响应文本
  const text = new TextDecoder('utf-8').decode(response.body);
  const locales = JSON.parse(text);
  // 手动设置本地化资源
  this.set('resources', locales);
}).catch((err) => {
  console.error('Load locales failed:', err);
});

强制指定编码解码，看是否能解决乱码问题。

最后排查文件本身 #

如果以上都没用，检查你的locales.json文件是否带有UTF-8 BOM（字节顺序标记）。原生XHR通常能自动处理BOM，但某些情况下Sinon的XHR包装可能会解析错误，去掉BOM再试试。

内容的提问来源于stack exchange，提问作者TobiasB