URL 在线解析工具 - 拆解协议/域名/参数/锚点

1. 粘贴即解析

端口为空不是遗漏——浏览器省略协议默认端口（https 即 443，http 即 80），只有显式写了非默认端口时才会显示。

1. 把完整 URL（必须含 https:// 或 http:// 前缀）粘贴到输入框。
2. 下方即时展示拆解结果：协议、主机名、端口、路径、锚点，查询参数以键值对表格呈现。
3. 参数表格支持复制单个键或值，排查接口时直接拿去对比预期。

2. 参数值显示的是解码后的原文

URL 里的中文和特殊字符以百分号编码传输（如 %E4%B8%AD），工具展示的是解码后的原文，方便阅读。反向注意：如果你要把某个参数值复制回代码里拼接 URL，含中文或 &、=、# 等保留字符时必须重新 encodeURIComponent，直接拼会破坏 URL 结构。

3. 排查「接口对不上」的四个高频原因

• 参数顺序：多数后端不关心顺序，但少数签名校验把参数按字典序重排后拼接——顺序不同签名就不同。
• 编码差异：空格编码成 %20 还是 +、斜杠转不转义，不同语言默认行为不同，肉眼看着一样、服务端收到的字节不一样。
• 锚点陷阱：# 后面的内容永远不会发给服务器——它是浏览器片段标识符，接口日志里查不到它是正常的。
• URL 里带密码：basic auth 凭据写在 https://user:pass@host 里能解析出来，但这种 URL 会进浏览器历史和服务器日志，仅限临时调试。

4. URL 构造器的三个隐蔽行为

现代浏览器内置的 WHATWG URL 构造器取代了手写 parse，但有三个隐蔽行为值得知道：其一，href 会规范化——末尾斜杠、默认端口 :80/:443、大小写域名都会被归一化，对比「原始字符串是否相等」经常误判；其二，searchParams.get 对不存在的键返回 null 而空参数（?a=）返回空串，三态（null/空串/有值）在条件判断里必须分开处理；其三，url.searchParams 迭代顺序保持出现顺序，但重复键的语义由服务端决定——PHP 取最后一个、Express（默认 query parser）返回数组，同一 URL 两端解析结果不同。

5. 解析结果的安全使用

• 来自 URL 的值先过白名单再使用：协议只允许 https/http，hostname 校验后缀（防 evil.com.example.com 绕过）。
• decodeURIComponent 可能抛 URIError（非法 % 序列）——用户可控输入务必 try/catch。
• location.hash 里的内容不发给服务器但同样可控，XSS 语境下它与 query 同罪。

6. 缺协议、相对路径与「看起来像 URL」的字符串

本工具期望带 http:// 或 https:// 的绝对 URL——缺协议时浏览器 URL 构造器会按相对路径或抛错，表现因输入而异。遇到 //cdn.example.com/a.js 这种协议相对地址、或 /api/v1?x=1 这种站内路径，先补全你真正请求时的协议与主机，再粘贴解析，否则主机/路径字段会对不齐线上流量。mailto:、data:、blob: 也能被 WHATWG 解析，但查询参数语义与 http(s) 不同，调试 Web API 时不要把它们和 https 链接混在同一套假设里。