Как закодировать параметры URL?

Я пытаюсь передать параметры URL-адресу, который выглядит следующим образом:

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

И я хочу передать такие параметры, как URL-адрес изображения, который создается самим другим API, а ссылка на изображение выглядит так:

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

Однако, когда я пытаюсь использовать URL:

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

Не работает.

Я также пробовал использовать encodeURI()и encodeURIComponent()на imageURL, и это тоже не работает.

С 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/

Используя новый 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))

Вы не должны использовать encodeURIComponent()или encodeURI(). Вы должны использовать fixedEncodeURIComponent()и fixedEncodeURI(), согласно документации MDN.

Что касается encodeURI()...

Если кто-то хочет следовать более позднему RFC3986 для URL-адресов, в котором квадратные скобки зарезервированы (для IPv6) и, следовательно, не кодируются при формировании чего-то, что может быть частью URL-адреса (например, хоста), может помочь следующий фрагмент кода:

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).