Quando as solicitações falham, uma depuração sistemática ajuda a identificar o problema rapidamente.
Ative o registro detalhado
async function debugRequest(url, options) {
console.log('=== API Request ===");
console.log('URL:', url);
console.log('Method:', options.method);
console.log('Headers:', {
...options.headers,
'x-api-key': options.headers['x-api-key']?.substring(0, 10) + '...'
});
console.log('Body:', options.body);
const startTime = Date.now();
try {
const response = await fetch(url, options);
const duration = Date.now() - startTime;
console.log('=== API Response ===");
console.log('Status:', response.status, response.statusText);
console.log('Duration:', duration + 'ms');
console.log('Headers:', Object.fromEntries(response.headers));
const data = await response.json();
console.log('Body:', data);
return { response, data };
} catch (error) {
console.error('=== Request Failed ===");
console.error('Error:', error.message);
console.error('Duration:', Date.now() - startTime + 'ms');
throw error;
}
}
Verifique primeiro
1. A chave de API está correta:
console.log('API key starts with:', apiKey.substring(0, 10));
console.log('API key length:', apiKey.length);
2. O nome do cabeçalho é exato:
// Deve ser minúsculo 'x-api-key'
headers: {
'x-api-key': apiKey, // ✓ Correto
'X-API-Key': apiKey, // ✗ Errado
'api-key': apiKey, // ✗ Errado
}
3. O JSON é válido:
try {
const body = JSON.stringify({ query: 'test' });
console.log('Valid JSON:', body);
} catch (e) {
console.error('Invalid JSON:', e);
}
4. A solicitação chega ao servidor:
// Use a aba Network das DevTools do navegador ou
curl -v -X POST https://api.cathopic.com/resources \
-H "x-api-key: YOUR_KEY" \
-H "Content-Type: application/json" \
-d '{"query": "test"}'
Erros comuns
Content-Type incorreto:
// ✗ Errado
headers: {
'Content-Type': 'text/plain'
}
// ✓ Correto
headers: {
'Content-Type': 'application/json'
}
Não converter o corpo em string:
// ✗ Errado
body: { query: 'test' }
// ✓ Correto
body: JSON.stringify({ query: 'test' })
Usar GET em vez de POST:
// ✗ Todos os endpoints exigem POST
method: 'GET'
// ✓ Correto
method: 'POST'
Teste com uma solicitação mínima
Reduza ao mínimo para isolar o problema:
const response = await fetch('https://api.cathopic.com/resources', {
method: 'POST',
headers: {
'x-api-key': 'YOUR_ACTUAL_KEY_HERE',
'Content-Type': 'application/json'
},
body: '{}' // Objeto vazio
});
console.log(response.status);
console.log(await response.json());
Se isso funcionar, adicione gradualmente os parâmetros de volta até que falhe.
Compare com um exemplo que funciona
Teste com curl para verificar sua implementação:
curl -X POST https://api.cathopic.com/resources \
-H "x-api-key: YOUR_KEY" \
-H "Content-Type: application/json" \
-d '{"query": "Jesus", "page": 1, "page_size": 5}'
Se o curl funcionar, mas seu código não, compare os cabeçalhos e o corpo exatos.
Ainda com dificuldades?
Entre em contato com o suporte ao desenvolvedor com:
Mensagem de erro completa
Cabeçalhos da solicitação (oculte sua chave de API completa)
Corpo da solicitação
Status e corpo da resposta
Linguagem de programação e biblioteca HTTP
Trecho de código (sem expor credenciais)