Skip to content

Como converter comandos cURL para JavaScript fetch・Python requests|Integração com DevTools

Categoria:Desenvolvimento de HTTP・API
Este artigo está disponível atualmente apenas em japonês. As versões traduzidas serão publicadas sequencialmente.

Uma tarefa comum na depuração de API é 「copiar o comando cURL visto no Chrome DevTools e colocá-lo diretamente no código」. Este artigo explica <strong>o sistema de opções do cURL</strong>, o funcionamento do recurso 「Copy as cURL」 do DevTools, e os padrões de conversão para linguagens principais (JavaScript fetch / axios / Python requests / PHP cURL / Go net/http). Com a <a href="/ja/tools/curl/">ferramenta de conversão de cURL</a> apresentada no final, você pode converter tudo com um simples copiar e colar.

Por que começar com cURL

Ao implementar e debugar uma API, é comum usar o fluxo de trabalho 「verificar primeiro se funciona com curl antes de implementar no código」. Os motivos são os seguintes:

  • <strong>Independente de linguagem</strong>: curl é uma linguagem comum que funciona em praticamente qualquer ambiente
  • <strong>Copiar imediatamente do DevTools</strong>: Na aba Network do Chrome / Firefox / Safari, clique com o botão direito na requisição → Copy as cURL para obter o comando de reprodução completo
  • <strong>Garantir reprodutibilidade</strong>: Anexando comandos <code>curl</code> em relatórios de bugs ou perguntas no Stack Overflow, você pode fazer com que outros tentem a mesma solicitação sem diferenças de ambiente

Principais opções do cURL

As opções cURL mínimas que você deve conhecer são as seguintes.

OpçãoUsoExemplo
-X / --requestEspecificação do método HTTP-X POST
-H / --headerAdição de Cabeçalho de Solicitação-H "Content-Type: application/json"
-d / --dataCorpo da requisição-d '{"id":1}'
--data-rawDados brutos sem interpretação de escape--data-raw 'a=1&b=2'
-F / --formmultipart/form-data-F "file=@./a.png"
-u / --userAutenticação básica-u user:pass
-b / --cookieEnvio de Cookie-b "session=abc"
-L / --locationRastreamento de redirecionamento
-k / --insecurePular verificação de certificado SSL (apenas desenvolvimento)
--compressedAceitação de gzip

O que você obtém com 「Copy as cURL」 no DevTools

Abra a aba Network no Chrome / Firefox / Edge e, clicando com o botão direito em qualquer requisição, você verá um menu <strong>Copy → Copy as cURL</strong>. Ao clicar nele, um comando que reproduz completamente o seguinte é copiado para a área de transferência.

  • Método HTTP e URL completa
  • Todos os cabeçalhos de solicitação enviados (<code>Authorization</code> / <code>User-Agent</code> / <code>Accept</code> / <code>Cookie</code>, etc.)
  • Corpo da requisição (JSON / form-data / binary)
  • Escape por ANSI-C quoting (<code>$'...'</code>)

Como ponto de atenção, o 「Copy as cURL」 do Firefox usa <code>--data-raw</code>, enquanto o Chrome usa <code>--data-binary</code>, entre outras diferenças sutis. É necessário que a implementação da ferramenta de conversão seja capaz de reconhecer ambos.

Mapa de correspondência: opções cURL → opções fetch cURL fetch -X POST method: 'POST' -H "Key: Val" headers: { Key: 'Val' } -d "body" body: 'body' -F file=@a.txt body: FormData --cookie credentials: 'include' -u user:pass Authorization: Basic
Figura 1: Relação de correspondência entre as principais opções de cURL e opções de fetch

Conversão para JavaScript fetch

Mostro um exemplo de conversão típica de JSON POST.

# cURL
curl -X POST https://api.example.com/users \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer YOUR_TOKEN' \
  -d '{"name":"Alice","email":"alice@example.com"}'
// JavaScript fetch
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_TOKEN',
  },
  body: JSON.stringify({ name: 'Alice', email: 'alice@example.com' }),
})
  .then(r => r.json())
  .then(console.log);

Versão axios

import axios from 'axios';

axios.post(
  'https://api.example.com/users',
  { name: 'Alice', email: 'alice@example.com' },
  { headers: { 'Authorization': 'Bearer YOUR_TOKEN' } }
).then(r => console.log(r.data));

Conversão para Python requests

import requests

response = requests.post(
    'https://api.example.com/users',
    headers={
        'Content-Type': 'application/json',
        'Authorization': 'Bearer YOUR_TOKEN',
    },
    json={'name': 'Alice', 'email': 'alice@example.com'},
)
print(response.json())

O ponto importante é usar <code>json=</code> em vez de <code>data=</code>. Ao especificar <code>json=</code>, o requests serializa automaticamente JSON e também define o Content-Type automaticamente.

Conversão para PHP cURL

<?php
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://api.example.com/users');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    'Content-Type: application/json',
    'Authorization: Bearer YOUR_TOKEN',
]);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode([
    'name'  => 'Alice',
    'email' => 'alice@example.com',
]));

$response = curl_exec($ch);
curl_close($ch);
echo $response;

Conversão para Go net/http

package main

import (
    "bytes"
    "io"
    "net/http"
)

func main() {
    body := bytes.NewReader([]byte(`{"name":"Alice","email":"alice@example.com"}`))
    req, _ := http.NewRequest("POST", "https://api.example.com/users", body)
    req.Header.Set("Content-Type", "application/json")
    req.Header.Set("Authorization", "Bearer YOUR_TOKEN")

    res, _ := http.DefaultClient.Do(req)
    defer res.Body.Close()
    data, _ := io.ReadAll(res.Body)
    println(string(data))
}

Atenção: é estritamente proibido fazer hardcode de tokens

Ao converter comandos cURL para código, tenha cuidado para <strong>não escrever os valores do cabeçalho Authorization (token Bearer ou API Key) diretamente no código e fazer commit</strong>.

  • Leia tokens de produção por meio de variáveis de ambiente (<code>process.env.API_TOKEN</code> / <code>os.environ['API_TOKEN']</code> / <code>getenv()</code>)
  • Verificar com <code>git diff</code> antes do commit se não há informações secretas misturadas
  • Se já foi feito <code>commit</code>, invalide o token imediatamente (rotação) e reescreva o histórico (<code>git filter-repo</code>)

Ferramenta de conversão cURL do DevLab

<a href="/ja/tools/curl/">Ferramenta de Conversão cURL ⇄ fetch / axios do DevLab</a> executa todas as conversões acima <strong>completamente no navegador</strong> em um clique. Suporta 13 tipos de destino:

  • JavaScript: fetch / axios / node-fetch / https padrão do Node.js
  • Python: requests / urllib
  • PHP: cURL / file_get_contents
  • Go: net/http
  • Rust: reqwest
  • wget / HTTPie / PowerShell Invoke-WebRequest

As opções do lado cURL são <code>-X</code> <code>-H</code> <code>-d</code> <code>--data-raw</code> <code>--data-binary</code> <code>--data-urlencode</code> <code>-F</code> <code>-u</code> <code>-b</code> <code>-A</code> <code>-e</code> <code>-L</code> <code>-k</code> <code>-I</code> e ANSI-C quoting <code>$'...'</code> são suportadas, aceitando diretamente a saída 「Copy as cURL」 do Chrome e Firefox.

Resumo

cURL é extremamente conveniente como uma linguagem comum independente de linguagem para reprodução de HTTP, e quando combinado com DevTools, você pode reproduzir imediatamente requisições de API em operação. Se você dominar os padrões de conversão mostrados neste artigo, poderá reproduzir o mesmo comportamento em qualquer linguagem. A conversão manual é propensa a erros e omissões (especialmente Content-Type e escape de aspas), portanto recomendamos fortemente o uso de conversão automática ferramentada.