Preciso de um auxílio com um problema em um projeto Angular + Node.js hospedado no Vercel

Olá olá! 👋 Gostaria de fazer uma pergunta que creio ter a ver mais com hospedagem do que código.

Tenho um site desenvolvido com Angular e Node.js, ambos hospedados na Vercel. Meu frontend consome uma API Node.js que inclui um endpoint POST para enviar um e-mail.

Tudo funciona perfeitamente em localhost.
Após o deploy na Vercel, a requisição POST falha com "405 Method Not Allowed", mesmo que requisições GET funcionem normalmente.

O que já tentei até agora:

Verifiquei as configurações de CORS (parece estar tudo certo e talvez eu nem precise pois a API e frontend estão no mesmo domínio);
Pesquisei na documentação e fóruns da Vercel;
Consultei chatbots (tive algumas ideias, mas nada resolveu);
Criar e ajustar o arquivo vercel.json para incluir os Headers de requisição;

Eu estou considerando hospedar a API separadamente na Vercel, mas gostaria de saber se há uma solução melhor antes de seguir esse caminho.

dealmeida há 23 dias

o sr criou um vercel.json? não uso mais a vercel, porém, talvez seja necessário configurar um desse para permitir o acesso a métodos serverless. senão, a vercel vai entender que a aplicação node é estática. exemplo de vercel.json:

{
  "rewrites": [
    { "source": "/api/(.*)", "destination": "/api/index.js" }
  ]
}

acima, todo endpoint /api/... vai cair em um arquivo index.js localizado na pasta /api com origem à raiz.

{
  "version": 2,
  "builds": [
    {
      "src": "api/index.ts",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "/api/index.ts"
    }
  ]
}

acima, para todo endpoint /api/..., toda requisição vai cair em cima da aplicação que roda no arquivo index.ts na pasta /api, desde a raiz do projeto. se não estiver numa pasta api, pode acusar que está em outro diretório, mesmo. talvez seja interessante ler a documentação, pois eu criei esse vercel.json na mão e nem o testei. eu sei que talvez seja necessário um vercel.json, pois já me ocorreu esse erro ao utilizar sveltekit. para o sveltekit, que é fullstack, só me necessitou escolher se usaria vercel.json ou um adapter nativo.

se a vercel estiver mesmo hospedando tua aplicação como arquivos estáticos, basta provar acessando algo como https://DOMINIO-VERCEL.vercel.app/api/index.ts ou algo do tipo, assim talvez consiga visualizar o arquivo estático.

eliaseas há 23 dias

Abre o inspetor de rede e vê exatamente qual requisição está falhando, se é a POST ou a OPTIONS que a precede.

Acredito que seu problema seja no seu backend que simplemente não tem uma rota definida para o POST

S0lturne há 23 dias

É o POST, o OPTIONS nem chega a ser chamado. Quanto ao código eu estou definindo corretamente, acredito. Pois é o famoso caso de "na minha máquina roda", então algo eu fiz certo kkkkk Aqui está a definição das routes no meu `server.js`: ```js const contatoRoutes = require('./controllers/contato.controller'); app.use('/api/contato', contatoRoutes); ``` E aqui o meu método POST dentro do meu `contato.controller.js`: ```js // #region POST router.post('/send', validatePayload, async (req, res) => { const returnModel = req.returnModel; const contatoFormModel = req.body; // Validação de campos... try { // Lógica do envio de email... returnModel.error = false; returnModel.code = 200; return res.status(200).json(returnModel); } catch (err) { returnModel.error = true; returnModel.errorMessage = `Ocorreu um erro ao enviar o formulário: ${err}`; returnModel.code = 500; return res.status(500).json(returnModel); } }); // #endregion POST ```

dealmeida há 23 dias

talvez seja necessário criar um vercel.json. já me ocorreu esse erro uma vez. talvez tua aplicação esteja sendo hospedada como arquivos estáticos em vez de uma aplicação serverless.

S0lturne há 21 dias

Acredito que era exatamente isso. O que eu precisei fazer foi reorganizar e publicar minha API em outro projeto no Vercel, dessa vez com as configs certas e funcionou! Te agradeço pelas sugestões! Foi uma mão fazer funcionar kkkk