什么是服务工作者的％2F问题

Question

我是我的网络应用，搜索网址看起来像这样。

http://localhost:8080/search/{value}/page/1

如果我使用正斜杠（例如some/value）提供搜索值，则实际网址将转到我的春季启动应用

http://localhost:8080/search/some/value/page/1

由于额外的正斜杠被视为路径，控制器返回404。

所以我把搜索值url安全了，

$('.search').submit(function (ev) {
  ev.preventDefault();
  var searchParam = ev.target.search.value;
  if (searchParam) {
    window.location.href = '/search/' + encodeURIComponent(searchParam) + '/page/1';
  }
});

并且URL变成了这样的东西。到目前为止，这是有效的。

http://localhost:8080/search/some%2Fvalue/page/1

但后来出现了实际问题。

我按指导here实施了ServiceWorker离线支持，现在我的ServiceWorker为HTTP 400提供了%2F的任何网址。在我的情况下，上面的搜索URL。 我搜索谷歌是有原因的，我可以得到的唯一痕迹是我引用的最后一行this article，

  

Google修复了％2F问题，但建议使用沙箱的每个网站   域添加额外的代码以防止这种情况。

这让我很想知道以下内容。

• 什么是%2F问题？
• 谷歌正在谈论什么代码？

  

只是为了澄清我对这个问题的意图，

     

  
• 我可以通过从UI本身的搜索值中完全剥离所有正斜杠来避免此问题。 （这是我打算做的事情。）
  
• 基于查询参数的搜索不适合我。
  

Answer 1

%2f是URL encoded /。您的路由代码中可能存在错误，因为您的/方法中的网址%2f可能已设置为encodeURIComponent(searchParam)。服务工作者未正确地对其进行编码。

作为一种解决方法，您可能希望使用searchParam.split('/')，然后单独编码每个字符串。最后，result.join('/')获取正确的网址