Config JSON

URL

Cosa fa JSON in URL?

Hai un oggetto JSON che descrive le parti di un endpoint HTTP — protocollo, host, path, parametri di query, hash — e ti serve come singola stringa URL che fetch(), curl o il tuo client HTTP riesca a digerire. Incolla il JSON a sinistra, ottieni la URL assemblata e codificata in percentuale a destra. È la stessa direzione che ogni fixture di test backend, ogni esempio OpenAPI e ogni file di config prima o poi devono produrre.

Usa il costruttore URL nativo del browser e URLSearchParams per assemblare la URL, quindi la codifica è esattamente quella definita dallo standard URL WHATWG ed esattamente quella che invierebbe un browser reale. Gli spazi nella query diventano +, le parentesi quadre %5B/%5D, accenti ed emoji vengono codificati in percentuale UTF-8. Le chiavi di query ripetute sono supportate passando un array — "tag": ["red", "blue"] emette tag=red&tag=blue.

Questa pagina esiste perché la maggior parte dei progetti già conserva le URL come JSON da qualche parte — file di environment, collection di Postman, fixture di Cypress, spec OpenAPI, valori Helm. Quando ti serve quel JSON come stringa URL reale per uno script o un curl una tantum, ricucirla a mano è il punto in cui si nascondono i bug. La conversione segue l'RFC 3986 per la sintassi URL e accetta JSON standard secondo l'RFC 8259 in input. Tutto gira in locale — il JSON e la URL non lasciano mai il tuo browser. La direzione opposta sta su URL in JSON.

Come convertire JSON in URL

Tre passi. Ognuno corrisponde a un pulsante in questa pagina.

Incolla una config JSON o carica l'esempio

Lascia cadere a sinistra un oggetto JSON che descrive le parti della URL. protocol e host sono gli unici campi obbligatori; tutto il resto è opzionale. Clicca Esempio per caricare un endpoint e-commerce realistico con più parametri di query e un hash:

{
  "protocol": "https",
  "host": "api.shop.example.com",
  "pathname": "/v1/orders",
  "searchParams": {
    "customer": "Ava Chen",
    "status": "active",
    "total[gte]": "49.99",
    "page": "2"
  },
  "hash": "summary"
}

Campi opzionali: port, username, password, pathname, searchParams, hash. Dentro searchParams una stringa è un valore singolo; un array sono chiavi ripetute. La sintassi JSON viene parsata con JSON.parse — niente commenti, niente virgole finali.

Leggi la URL assemblata

Il pannello a destra si aggiorna mentre digiti. Vedrai la URL completa — https://api.shop.example.com/v1/orders?customer=Ava+Chen&status=active&total%5Bgte%5D=49.99&page=2#summary — con ogni parte codificata in percentuale come prevede lo standard URL. Buttala dritta in una chiamata fetch(), in un comando curl, in un test Postman o in un file di config che si aspetta una singola stringa URL.

Copia o scarica

Clicca Copia per mandare la URL negli appunti, oppure Scarica per salvarla come file di testo. Usa Cancella sul pannello di input per ripartire da una nuova config.

Quando lo userai davvero

Trasformare esempi OpenAPI in comandi curl eseguibili

Le spec OpenAPI descrivono i server come {url, variables} e le operazioni come path con parameters. Comporre la URL reale da quei pezzi a mano per un curl una tantum è scomodo — sostituire le variabili di path, codificare i parametri, azzeccare lo slash finale. Metti il JSON già fuso qui, copia la URL fuori, incolla in curl. La forma fusa coincide con quella descritta dal server-object OpenAPI.

Costruire URL da split di variabili d'ambiente

Una app 12-factor conserva le parti della URL in env var separate: API_HOST, API_PORT, API_BASE_PATH, API_TOKEN_PARAM. Per produrre la URL completa per un curl di sanity check durante un'incident response le assembli. Incolla la forma JSON in questa pagina, ottieni la URL, eseguila. Più veloce dello scripting in bash e senza il rischio di dimenticarsi di codificare un token che contiene +.

Fixture di Cypress e Playwright che salvano URL come oggetti

Le fixture di test spesso conservano le URL di richiesta in forma strutturata, in modo da poter asserire su parti singole (il path param orderId, il query param page). Quando la fixture deve anche fare una chiamata HTTP reale (per esempio per seedare dati via cy.request o page.goto), la forma strutturata deve diventare stringa. JSON in URL trasforma l'oggetto fixture salvato di Marco Rivera nella URL che il test harness può chiamare.

URL di webhook assemblate da config per tenant

I sistemi multi-tenant tengono config di webhook per cliente: {host: "hooks.tenant-a.example.com", pathname: "/orders/ORD-1001/notify", searchParams: {token: "..."}}. Il dispatcher legge il JSON e gli serve una stringa URL su cui fare POST. Stessa conversione che fa questa pagina, solo a runtime. Usa la pagina per verificare che la URL che il tuo codice produrrà combaci con quella registrata dal cliente.

Domande frequenti

Qual è la differenza con la pagina URL Builder?

Stesso motore, taglio diverso. URL Builder è per il caso in cui ti siedi a comporre una URL da zero — stai costruendo una richiesta. JSON in URL è per il caso in cui il JSON esiste già da qualche parte (una config, una spec OpenAPI, una fixture, uno split di env var) e devi convertirlo nella stringa URL che un pezzo di codice si aspetta. Scegli quella più aderente a quello che stai facendo — l'output è identico.

Il mio JSON salva la URL in modo diverso — posso usare qualsiasi forma?

Servono i nomi delle parti URL dello standard WHATWG: protocol, host, port, username, password, pathname, searchParams (oggetto), hash. Se il tuo JSON usa altre chiavi (scheme, baseUrl, query, fragment), rinominale prima. La forma rispecchia ciò che new URL(...) espone e ciò che la spec URL definisce, quindi ti allinei allo stesso modello che fetch e Node usano internamente.

Come mando lo stesso parametro di query due volte (es. ?tag=red&tag=blue)?

Usa un array come valore: "tag": ["red", "blue"]. Il convertitore emette tag=red&tag=blue nell'ordine fornito. Coincide con il modo in cui URLSearchParams gestisce le chiavi ripetute ed è ciò che la maggior parte dei server (Express, Rails, ASP.NET) si aspetta per i query param di tipo array.

Perché il mio spazio diventa + invece di %20?

Gli spazi nel componente di query sono codificati come + secondo le regole di application/x-www-form-urlencoded — è quello che emette URLSearchParams. Gli spazi nel path sono codificati come %20. Entrambi sono validi secondo l'RFC 3986 e tutti i server decodificano sia l'una che l'altra forma. Se il tuo server accetta solo %20 nella query, il bug è lato server.

Posso includere credenziali (username/password) nella URL?

Sì — imposta "username" e "password" nel JSON. Compaiono prima dell'host come user:pass@host. L'RFC 3986 §3.2.1 sconsiglia di farlo in URL di produzione perché finiscono nella history del browser, nei log dei server e nelle cache dei proxy — bene per un test locale veloce, male in config condivise.

La URL esce mai dal mio browser?

No. Il parsing del JSON è JSON.parse nella tua scheda; l'assemblaggio della URL è new URL(...) nella tua scheda; nessuno dei due chiama un server. Nessun upload, nessun log. Puoi aprire la pagina una volta con la connessione, scollegarti e continuare a usarla dalla cache.

Altri strumenti URL e JSON

JSON in URL è metà del viaggio di andata e ritorno. Ecco il resto del kit: