3
respostas

Como resolver o problema com o bloqueio CORS

Não consigo cadastrar nem fazer login no site Adopet, devido a este erro:

Access to XMLHttpRequest at 'https://adopet-api-i8qu.onrender.com/adotante/login' from origin 'https://adopet-frontend-cypress.vercel.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Alguém já enfrentou ou saber resolver este problema.

3 respostas

Faço todo o procedimento de forma manual e também recebo a mesma mensagem.

Esse erro não está relacionado ao Cypress em si ele acontece antes, na comunicação entre o front-end e a API. Vamos por partes.

A mensagem indica um bloqueio de CORS (Cross-Origin Resource Sharing):

O front-end (adopet-frontend-cypress.vercel.app) está tentando acessar a API (adopet-api-i8qu.onrender.com), mas a API não está permitindo requisições vindas dessa origem.

O navegador faz primeiro uma requisição de preflight (OPTIONS) e, como a API não retorna o header Access-Control-Allow-Origin, o browser bloqueia a chamada.
Por isso:

  • Não funciona no Cypress
  • Não funciona manualmente no navegador

Ou seja, não é problema do teste.
Por que isso acontece no curso

No projeto do Adopet, a API precisa estar configurada para aceitar requisições do domínio do front-end. Se isso não estiver feito, qualquer tentativa de login ou cadastro vai falhar por CORS.

Em ambiente real, isso é resolvido no back-end, nunca no front-end ou no Cypress.

Como resolver corretamente

A solução é configurar o CORS na API. Alguns exemplos comuns:

Se a API for Node.js com Express

Usar o middleware cors:

const cors = require('cors');

app.use(cors({
  origin: 'https://adopet-frontend-cypress.vercel.app',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  credentials: true
}));

Ou, para testes/estudo:

app.use(cors());

Se a API estiver no Render

Verifique se:

  • A versão publicada da API contém essa configuração
  • O deploy foi feito após adicionar o CORS
  • Não há erro no log da aplicação no Render

E no contexto do Cypress

O Cypress não ignora CORS, porque o problema acontece no navegador.
Então:

  • Não adianta configurar nada no Cypress
  • Não adianta desabilitar segurança do browser
  • Se dá erro manualmente, vai dar erro no teste também

Esse tipo de dúvida é bem comum em testes E2E e, na prática, é até um ponto positivo: mostra que o teste está revelando um problema real de integração.

Resumindo, o back-end está com problemas e ainda não foi corrigido.