webextension：为什么浏览器在请求的 URL 中添加尾部斜杠？

Question

当我向 发出请求时，为什么我会在webRequest.onBeforeRequestListenerhttp://www.example.com中看到？http://www.example.com/

例如：

chrome.webRequest.onBeforeRequest.addListener(
  details => console.log('Sending request to', details.url),
  { urls: ['<all_urls>'] });
fetch('http://www.example.com');

将打印

Sending request to http://www.example.com/

这与网络请求监视器中显示的请求 URL 一致。例如，如果我将其转换为curl命令，则请求如下所示：

curl 'http://www.example.com/' -H 'Accept: */*' -H 'Connection: keep-alive'
    -H 'Accept-Encoding: gzip, deflate' -H 'Accept-Language: en-US,en;q=0.9'
    -H 'User-Agent: ...' --compressed

所以，原来出去的请求是 for ，http://www.example.com/不是 for http://www.example.com。该决定必须是在浏览器中做出的，而不是由服务器做出的。

XMLHttpRequest使用代替时也会发生相同的行为fetch。在我的示例中，我使用了 Chrome，但在 Firefox 上也是一样的。

问题：

• 为什么浏览器会自动更改它？其他 URL 也会发生这种情况。根据我的理解，添加尾部斜杠通常会起作用，但总的来说，这是一个重大变化。
• 如果我想在onBeforeRequest监听器中过滤当前对特定 URL 的请求，如何可靠地匹配它？例如，仅检查 URL 是否相同将会失败。
• 浏览器中是否还有更多重写 URL 规则需要注意？

Answer 1

想一想，我找到了。浏览器只是修复无效的 URL。

引用维基百科，URL 如下所示：

scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment]

如果存在权限部分，则路径必须以单斜杠 (/) 开头；如果不存在，路径也可以以单斜杠 (/) 开头，但不得以双斜杠开头。路径始终已定义，但定义的路径可能为空（零长度），因此没有尾部斜杠。

http://example.com有一个权限部分（在本例中，模式加上主机名：）http://example.com，但这会使路径为空。根据规范，路径必须以 开头/，因此浏览器通过将空路径替换为 来修复它/。

如果您使用有效的 URL，例如http://example.com/abc，则不需要对其进行修改。