如何编码 URL 参数？答案

【问题标题】：How to encode URL parameters?如何编码 URL 参数？
【发布时间】：2011-12-29 10:13:01
【问题描述】：

我正在尝试将参数传递给如下所示的 URL：

http://www.foobar.com/foo?imageurl=

我想传递参数，例如由另一个 API 自己生成的图像 URL，图像的链接结果为：

http://www.image.com/?username=unknown&password=unknown

但是，当我尝试使用 URL 时：

http://www.foobar.com/foo?imageurl=http://www.image.com/?username=unknown&password=unknown

它不起作用。

我也尝试在 imageURL 上使用 encodeURI() 和 encodeURIComponent()，但这也不起作用。

【问题讨论】：

生成 URL 的语言是什么？ JavaScript？
请注意，您不应该在 url 中输入密码，即使使用 https 也不应，因为客户端和服务器之间的每个路由器都会看到整个 url。
这能回答你的问题吗？ How to create query parameters in Javascript?
@fabb 这似乎不是真的：stackoverflow.com/a/499594/513038
@Erhannis GET 路径和参数是为 HTTPS 加密的，但不是 HTTP（好吧，没有人应该使用它，但仍然......）。然而，更严重的是，服务器日志和任何分析工具都会看到 GET 参数，因此您将在 apache 日志和 Google Analytics 中记录明文密码。如果已启用，它们也会通过引荐来源标头发送。见security.stackexchange.com/questions/233795/…

标签： javascript url encodeuricomponent

【解决方案1】：

与URLSearchParams:

const params = new URLSearchParams()
params.append('imageurl', 'http://www.image.com/?username=unknown&password=unknown')
return `http://www.foobar.com/foo?${params.toString()}`

【讨论】：

【解决方案2】：

自己试试encodeURI() 和encodeURIComponent()...

console.log(encodeURIComponent('@#$%^&amp;*'));

输入：@#$%^&*。输出：%40%23%24%25%5E%26*。那么，等等，* 发生了什么事？为什么没有转换？ TLDR：您实际上想要fixedEncodeURIComponent() 和fixedEncodeURI()。长篇大论...

您不应使用encodeURIComponent() 或encodeURI()。根据 MDN 文档，您应该使用 fixedEncodeURIComponent() 和 fixedEncodeURI()。

关于encodeURI()...

如果希望遵循更新的 RFC3986 的 URL，它保留方括号（用于 IPv6），因此在形成可能是 URL 一部分的内容（例如主机）时不编码，则以下代码 sn- p 可能会有所帮助：

function fixedEncodeURI(str) { return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']'); }

关于encodeURIComponent()...

为了更严格地遵守 RFC 3986（保留 !、'、(、) 和 *），即使这些字符没有正式的 URI 分隔用途，也可以安全地使用以下字符：

function fixedEncodeURIComponent(str) { return encodeURIComponent(str).replace(/[!'()*]/g, function(c) { return '%' + c.charCodeAt(0).toString(16); }); }

那么，有什么区别呢？ fixedEncodeURI() 和 fixedEncodeURIComponent() 转换同一组值，但 fixedEncodeURIComponent() 也转换此组：+@?=:*#;,$&。该集合用于GET参数（&、+等）、锚标签（#）、通配符标签（*）、电子邮件/用户名部分（@）等。 .

例如 -- 如果您使用encodeURI()，user@example.com/?email=me@home 将无法正确将第二个@ 发送到服务器，除非您的浏览器处理兼容性（Chrome 自然经常这样做） )。

【讨论】：

"except for your browser handling the compatibility" 是什么意思？
@Stephan：例如，如果site.com?formula=a+b=c 用于生成formula=>a+b=c，这违反了规范，但如果它有效，那是因为 Chrome/etc。可以通过user@site.com?email=user@site.com检测URL等规范失败。

【解决方案3】：

使用新的 ES6 Object.entries()，它可以创建一个有趣的小嵌套 map/join：

const encodeGetParams = p => 
  Object.entries(p).map(kv => kv.map(encodeURIComponent).join("=")).join("&");

const params = {
  user: "María Rodríguez",
  awesome: true,
  awesomeness: 64,
  "ZOMG+&=*(": "*^%*GMOZ"
};

console.log("https://example.com/endpoint?" + encodeGetParams(params))

【讨论】：

这在我的情况下非常有效，我在 map 函数中添加了对 decodeURIComponent 的调用，以确保已经编码的条目不会变得混乱

【解决方案4】：

使用 PHP

echo urlencode("http://www.image.com/?username=unknown&password=unknown");

结果

http%3A%2F%2Fwww.image.com%2F%3Fusername%3Dunknown%26password%3Dunknown

使用 Javascript：

var myUrl = "http://www.image.com/?username=unknown&password=unknown";
var encodedURL= "http://www.foobar.com/foo?imageurl=" + encodeURIComponent(myUrl);

演示：http://jsfiddle.net/Lpv53/

【讨论】：

这个问题不是关于 PHP，而是关于 Javascript。