Realizar solicitudes HTTP utilizando las herramientas para desarrolladores de Chrome
¿Existe alguna manera de realizar una solicitud HTTP utilizando las herramientas de desarrollador de Chrome sin utilizar un complemento como POSTER?
Dado que Chrome (y la mayoría de los demás navegadores) admite Fetch API , ahora es bastante fácil realizar solicitudes HTTP desde la consola devtools.
Para OBTENER un archivo JSON, por ejemplo:
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(res => res.json())
.then(console.log)O para PUBLICAR un nuevo recurso:
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
}),
headers: {
'Content-type': 'application/json; charset=UTF-8'
}
})
.then(res => res.json())
.then(console.log)Chrome Devtools en realidad también admite la nueva sintaxis async/await (aunque await normalmente solo se puede usar dentro de una función asíncrona):
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')
console.log(await response.json())
Tenga en cuenta que sus solicitudes estarán sujetas a la política del mismo origen , al igual que cualquier otra solicitud HTTP en el navegador, así que evite las solicitudes de origen cruzado o asegúrese de que el servidor establezca encabezados CORS que permitan su solicitud.
Usando un complemento (respuesta anterior)
Además de las sugerencias publicadas anteriormente, descubrí que el complemento Postman para Chrome funciona muy bien. Le permite configurar encabezados y parámetros de URL, utilizar la autenticación HTTP, guardar las solicitudes que ejecuta con frecuencia, etc.
Si desea editar y volver a emitir una solicitud que haya capturado en la pestaña Red de Herramientas para desarrolladores de Chrome:
- Haga clic derecho
Nameen la solicitud - Seleccionar
Copy > Copy as cURL - Pegar en la línea de comando (el comando incluye cookies y encabezados)
- Edite la solicitud según sea necesario y ejecútela
Lo sé, publicación antigua... pero podría ser útil dejar esto aquí.
Los navegadores modernos ahora admiten la API Fetch .
Puedes usarlo así:
fetch("<url>")
.then(data => data.json()) // could be .text() or .blob() depending on the data you are expecting
.then(console.log); // print your data
PD: realizará todas las comprobaciones de CORS, ya que es un archivo XmlHttpRequest.
