Erro FetchError: request

error - FetchError: request to https://gist.githubusercontent.com/omariosouto/0ceab54bdd8182cbd1a4549d32945c1a/raw/578ad1e8e5296fa048e3e7ff6b317f7497b31ad9/alura-cases-faq.json failed, reason: self signed certificate in certificate chain at ClientRequest.<anonymous> (C:\Users\u002560\Documents\alura-cases\node_modules\next\dist\compiled\node-fetch\index.js:1:65763) at ClientRequest.emit (node:events:526:28) at TLSSocket.socketErrorListener (node:_http_client:442:9) at TLSSocket.emit (node:events:526:28) at emitErrorNT (node:internal/streams/destroy:157:8) at emitErrorCloseNT (node:internal/streams/destroy:122:3) at processTicksAndRejections (node:internal/process/task_queues:83:21) { type: 'system', errno: 'SELF_SIGNED_CERT_IN_CHAIN', code: 'SELF_SIGNED_CERT_IN_CHAIN', page: '/faq' }

import Link from '../src/components/Link'; export async function getStaticProps() { const FAQ_API_URL = 'https://gist.githubusercontent.com/omariosouto/0ceab54bdd8182cbd1a4549d32945c1a/raw/578ad1e8e5296fa048e3e7ff6b317f7497b31ad9/alura-cases-faq.json' const faq = await fetch(FAQ_API_URL) .then((respostaDoServidor) => { return respostaDoServidor.json(); }) .then((resposta) => { return resposta }); return { props: { faq, }, }; }; export default function FAQPage({ faq }) { console.log(faq); return ( <div> <h1>Alura Cases - FAQ</h1> <Link href="/"> Ir para Home </Link> <ul> {faq.map(({ answer, question}) => ( <li key={question}> <article> <h2>{question}</h2> <p>{answer}</p> </article> </li> ))} </ul> </div> ) }

Olá Marcos, tudo bem contigo?

O erro que você está enfrentando indica que você está tentando acessar um URL (https://gist.githubusercontent.com/omariosouto/0ceab54bdd8182cbd1a4549d32945c1a/raw/578ad1e8e5296fa048e3e7ff6b317f7497b31ad9/alura-cases-faq.json) que possui um certificado de segurança autoassinado. Isso geralmente ocorre quando o servidor não possui um certificado válido emitido por uma autoridade de certificação confiável.

Para contornar esse erro em um ambiente de desenvolvimento, você pode desabilitar temporariamente a verificação do certificado SSL. Para fazer isso, você pode passar a opção { rejectUnauthorized: false } para a função fetch, como mostrado abaixo:

import Link from '../src/components/Link';

export async function getStaticProps() {
  const FAQ_API_URL = 'https://gist.githubusercontent.com/omariosouto/0ceab54bdd8182cbd1a4549d32945c1a/raw/578ad1e8e5296fa048e3e7ff6b317f7497b31ad9/alura-cases-faq.json';

  const faq = await fetch(FAQ_API_URL, { agent: new https.Agent({ rejectUnauthorized: false }) })
    .then((respostaDoServidor) => respostaDoServidor.json())
    .then((resposta) => resposta);

  return {
    props: {
      faq,
    },
  };
};

export default function FAQPage({ faq }) {
  console.log(faq);
  return (
    <div>
      <h1>Alura Cases - FAQ</h1>
      <Link href="/">Ir para Home</Link>
      <ul>
        {faq.map(({ answer, question }) => (
          <li key={question}>
            <article>
              <h2>{question}</h2>
              <p>{answer}</p>
            </article>
          </li>
        ))}
      </ul>
    </div>
  )
}

No exemplo acima, a opção { agent: new https.Agent({ rejectUnauthorized: false }) } foi adicionada para desabilitar a verificação do certificado SSL.

No entanto, é importante lembrar que essa solução é adequada apenas para ambiente de desenvolvimento e não deve ser usada em produção. Em um ambiente de produção, você deve garantir que o servidor tenha um certificado SSL válido e confiável.

Espero ter ajudado, caso precise eu estarei aqui.

Abraços e bons estudos.