Problema com CORS

[IsaqueMansur]

[Descrição do problema] A API apresenta problemas de CORS, mesmo utilizando certificados SSL e fazendo as requisições via HTTPS. O que é engraçado é que, pelo Insomnia, PostMan e até mesmo pelo próprio navegador os dados chegam sem problemas.

[Retorno na DOM] Access to XMLHttpRequest at 'https://minhareceita.org/' from origin 'https://teste.artvac.com.br' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

[cuducos]

Você sabe como reproduzir o problema para facilitar a resolucão? Tem algum código que usou para esse XMLHttpRequest que eu possa testar aqui?

[cuducos]

Testei aqui indo no meu site pessoal, utilizando a console do navegador com:

const req = new XMLHttpRequest();
req.open("GET", "https://minhareceita.org/00.000.000/0001-91")
req.send() 

Funcionou (incusive verifiquei o conteúdo da resposta na aba Network).

[IsaqueMansur]

A requisição é feita com Axios e já funciona em outro site da empresa, o projeto está em migração, estou migrando um Create React App para Next (13.4). Estou cogitando que talvez seja alguma coisa relacionada ao fato da requisição acontecer do lado do servidor (Next SSR). Talvez, exista alguma incompatibilidade nova, pelo fato de NEXT 13.4 ser bem novo. Vou averiguar com clareza amanhã e retorno.

[IsaqueMansur]

[Atualização] É um problema relacionado ao NEXT 13.4. Ao criar outro APP REACT (cra), rodando localhost, na mesma porta que estava testando o app NEXT, funciona perfeitamente. Somente o NEXT está apresentando isso.

Código em ambos ambientes:

import axios from 'axios';

export default axios.create({
  baseURL: 'https://minhareceita.org/',
});

...
try {
      datasCompanie = await cnpjApi.get(`/${cnpj}`);
      } catch {
...

Tentei utilizar o "use client" do NEXT, ainda assim, sem sucesso:

'use client';
import cnpjApi from '@/services/cnpjApi';

export async function GetAllInfosOfOrganizationWithCNPJ(cnpj: string) {

  try {
    const { data } = await cnpjApi.get(`/${cnpj}`);
    return data;
  } catch (e) {
    console.log(e);
    return null;
  }
}

Erro retornado:

Access to XMLHttpRequest at 'https://docs.minhareceita.org/' (redirected from 'https://minhareceita.org/') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[IsaqueMansur]

[Solução] Resolvi o problema removendo o axios do APP. De qualquer forma, vale ressaltar alguns detalhes, todas outras API's consumidas no APP estão utlizando Axios, uma coisa que notei também é que o axios do meu app NEXT estava na versão mais nova (1.4.0), enquanto o app CRA ainda utilizava a 0.27.

Requisição funcionando no NEXT:

...
const x = fetch(`https://minhareceita.org/${orgInfos.cnpj}`)
      .then((res) => res.json())
...

[cuducos]

É um problema relacionado ao NEXT 13.4.

Eu não sei o que é o NEXT.

Pelo seu conhecimento, há algo que podemos fazer no Minha Receita ou é algp 100% externo mesmo?

[cuducos]

Com base nesse tópico do StackOverflow me parece algo do Next (e não do Minha Receita).

[IsaqueMansur]

É um problema relacionado ao NEXT 13.4.

Eu não sei o que é o NEXT.

Pelo seu conhecimento, há algo que podemos fazer no Minha Receita ou é algp 100% externo mesmo?

NEXT JS é um framework que utiliza REACT como base. Problemas de CORS sempre vêm do servidor (nunca poderia ser gerado por FrontEnd). De qualquer forma, o problema só aconteceu com a utilização do Axios, talvez existam meios de tratar algo no lado do servidor de vocês, mas acredito que é desnecessário, pelo fato do axios ser somente mais um dos diversos mediadores de requisições possíveis.

[cuducos]

Problemas de CORS sempre vêm do servidor (nunca poderia ser gerado por FrontEnd). De qualquer forma, o problema só aconteceu com a utilização do Axios

Aqui parece ter uma contradição:

• se um problema de CORS nunca é gerado pelo front-end (primeira frase)
• então não alterando o servidor do Minha Receita seria impossível gerar erro (o que contradiz a segunda frase)

Minha falta de conhecimento em Next.js, mais o tópico que linkei a acima, me fazem crer que:

• O Next.js atua como uma backend para tua aplicação (uma camada de server-side rendering talvez?)
• Talvez esse backend seja atue como uma espécie de proxy (no sentido amplo da palavra) para o Minha Receita dentro de tua aplicação
• O erro de CORS talvez tenha a ver com a camada frontend da tua aplicação falando com a camada backend da tua aplicação (e não com tua aplicação falando com o Minha Receita)

sequenceDiagram

  autonumber

  box Next.js
    participant F as Next.js front-end
    participant B as Next.js backend
  end

  participant M as Minha Receita

  F ->> B: Requisição HTTP interna
  B ->> M: Requisição HTTP externa
  M ->> B: Resposta HTTP externa
  B ->> F: Resposta HTTP interna

  Note over F,B: Erro de CORS

Nesse esquema, o erro de CORS aconteceria no ciclo Requisição/Resposta HTTP interna (setas 1 e 4), e não externa (setas 2 e 3).

Se essa hipótese fizer sentido, não há o que o servidor da Minha Receita fazer sobre o assunto.

[humrochagf]

Acredito que esteja faltando liberar o GET aqui https://github.com/cuducos/minha-receita/blob/main/api/api.go#L58

[cuducos]

Belo ponto, @humrochagf — não deveria ter POST (esse recurso não ceita POST), mas deveria ter GET.

A correção (ebbaa01) já está em produção, @IsaqueMansur — pode conferir se muda alguma coisa?

[IsaqueMansur]

Acredito que esteja faltando liberar o GET aqui https://github.com/cuducos/minha-receita/blob/main/api/api.go#L58

Belo ponto, @humrochagf — não deveria ter POST (esse recurso não ceita POST), mas deveria ter GET.

A correção (ebbaa01) já está em produção, @IsaqueMansur — pode conferir se muda alguma coisa?

Perfeita a correção, @cuducos e @humrochagf. Zero problemas ao utilizar o axios pra fazer a requisição agora.