Fiz a API e ela está funcionando corretamente no Postman, porém não consigo fazer os CRUD com o Front-end. Já tentei de diversas formas, porém sempre apresenta o mesmo erro (POST 400 (Bad Request)), não sei o que fazer. Alguém tem alguma dica?
Solucionado
Fiz a API e ela está funcionando corretamente no Postman, porém não consigo fazer os CRUD com o Front-end. Já tentei de diversas formas, porém sempre apresenta o mesmo erro (POST 400 (Bad Request)), não sei o que fazer. Alguém tem alguma dica?
Bom dia Caio, tudo certo? Vi que você criou 2 tópicos no assunto e vou responder aqui:
Eu rodei o seu projeto e a chamada em si parece estar certa, o problema que estamos encontrando é algo do navegador chamado CORS. Isso é uma política de segurança que impede que sites carreguem recursos de outras fontes sem uma forma de "aviso" na configuração do seu servidor. Aqui tem a documentação da MDN explicando essa política.
Para a nossa sorte, vi que você iniciou o pedaço da implementação do Axios, então creio que esse tópico aqui possa te ajudar: https://cursos.alura.com.br/forum/topico-has-been-blocked-by-cors-policy-reactjs-axios-111009. Essa configuração te permite aceitar recursos de qualquer ambiente. Recomendo não manter isso quando em produção.
Então a minha sugestão é a seguinte: termine o curso ainda sem implementar o front-end e faça o curso seguinte - NodeJS: Crie uma API REST padronizada e escalável para melhorar a manutenção da aplicação e também o curso JS na web: CRUD com JavaScript assíncrono, para lidar melhor com as leitura dos pelo front end, e aí depois retornar na implementação com o front end.
Espero ter ajudado, qualquer dúvida estou aqui no aguardo. Bons estudos!
Boa tarde, tudo bem?
Realizei os cursos informados, e o mesmo erro foi apresentado. Pesquisando por uma solução achei uma opção (talvez não seja isso, porém acho que pode ser o motivo do erro), como estou iniciando tanto o back-end como o front-end separados e com o 'npm start', mas o correto seria 'npm run dev'. Isso teria alguma influência?
Outra coisa que vi, porém, não consegui configurar foi no 'package.json' um proxy para o front-end conseguir se comunicar com o back-end, essa configuração poderia corrigir o erro?
Obrigado, At.te
Boa tarde Caio, tudo tranquilo. Espero que também esteja bem.
Sobre a questão do npm start e npm run dev: o arquivo package.json pode conter algumas instruções dentro da propriedade "scripts". A sua pasta de frontend, por exemplo, contém isso:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},Então ao chamar o comando npm start a sua máquina na verdade olha esse arquivo e executa o comando react-scripts start.
Essa funcionalidade permite que projetos compartilhados possam ser testados e executados com maior facilidade. Alguns nomes de scripts são reservados e já executam certas chamadas, mas de forma geral basta chamar como npm run <NomeDoScript> e ter colocado esse comando lá no package.json.
Sobre configurar a aplicação para comunicar com o backend pelo package.json: talvez até tenha como fazer isso, mas não encontrei com uma solução do tipo até agora.
Eu achei alguns outros conteúdos que temos sobre a CORS Policy, que eu creio ser o nosso problema nesse projeto:
Espero ter ajudado e que consiga resolver esses problemas com esses conteúdos. Qualquer dúvida é só retornar! Bons estudos!
Boa noite,
Adicionei o 'app.use(cors());' e o erro foi corrigido. Neste caso o bodyParser não deveria fazer o mesmo processo do CORS?
Alterei disso, também alterei a fetch. corrigindo o erro do 'POST 400 (Bad Request)'.
Agora está tudo funcionando corretamente.
Muito obrigado! :)
Bom dia Caio. Que bom que você conseguiu ajustar o funcionamento da aplicação!
Olha, não sei se entendi a sua dúvida sobre o bodyParser. Precisaria que você detalhasse melhor o que quis dizer ou até mesmo marcar esse tópico como solucionado e criar um novo com esse problema específico.
Bons estudos!