4
respostas

Página de suscesso para requisição POST aparece mas o json da API não recebe o vídeo

Para ficar mais fácil e ir direto ao ponto, o link do repositório no GitHub, a página de suscesso é exibida normalmente mas o vídeo não é postado de fato na API, acredito que seja porque o endpoint é o link do json na vercel (sim eu hospedei o json na vercel pensando no ambiente do usuário para que ele possa usar a aplicação), caso seja CORS não sei o que fazer, utilizar JSON-Server para mockar API não tem graça pois só funciona no ambiente de desenvolvimento.

Mensagem de erro:

Access to fetch at 'https://aluraplay-requisicoes-navy.vercel.app/db.json/' from origin 'http://127.0.0.1:5500' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

4 respostas

Olá Rafael!

Sua ideia é muito bacana mesmo, mas infelizmente há limitações na vercel, pois nela você não pode escrever diretamente no sistema de arquivos do servidor, pois eles priorizam a escalabilidade e a segurança, restringindo a escrita em arquivos locais.

Caso você queira adicionar um vídeo, ou seja, fazer o famoso post vai retorno erros como nesse log observe: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Observe que quando eu tento adicionar um vídeo acontece um erro interno do servidor um erro "500", pois ele não consegue lidar com essa questão.

Mas... Depois de muita tentativa e erro, testando e pesquisando, eu encontrei um método, o problema é que ele subscreve tudo e é temporário, mas vou tentar buscar um meio de listar os vídeos antigos também, mas da para deixar estático no HTML, ou passando diretamente no arquivo server.js.

Você basicamente vai copiar este meu repositório, que eu criei, e já tem várias configurações, em relação a CORS, Vercel dentre outros. Basicamente, é um repositório/banco de dados temporário com algumas limitações, mas por enquanto está funcionando e registrando os vídeos.

Observe essa imagem do sucesso rs, eu consegui fazer um post.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

No seu projeto no conecta API, você deve alterar todos os links que busca a sua API.

Em resumo, copie o meu repositório acima, faça o deploy e passe o link do site para os campos do arquivo conecta API.

Tem alguns pontos de melhorias que tem que ser revisado, como o campo de busca, mas foi um grande passo conseguir fazer um POST utilizando a Vercel.

Você pode testar como está o meu projeto: https://alura-play-weld.vercel.app/index.html

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Que mágica foi essa que você fez? Observação, não clonei o projeto nem nada, apenas apontei para o mesmo endpoint que o teu, e eu vi que ele fica hospedado na vercel. O que você fez para funcionar?

Muito obrigado, funciona direitinho. Mas me fala como você aprendeu a fazer isso? Tem algum artigo para me indicar para eu ler?

Olá Rafael!

Primeiro gostaria de agradecer por compartilhar essa questão, anteriormente nem mesmo eu acreditava nessa possibilidade, foi relativamente desafiador, mas o que fiz foi basicamente, analisar o código que já subia, para a vercel, e criar um banco de dados que ai é o "pulo do gato" de memória temporária, mas como disse ele não faz nada demais ele é temporário, porém permiti a operação de POST, e utiliza o Json-server o que eu achei um resultado bem bacana.

Alguns materiais que eu analisei foram:

  • Lowdb
    • Esse ponto é muito importante o lowdb permite criar um banco de dados em memória, o que significa que os dados são armazenados temporariamente na memória do servidor enquanto ele está em execução. Para aplicações menores ou teste, é bem legal o resultado.
  • Artigo Medium, para deploy

Mas não encontrei nada específico na internet que siga um tutorial completo. Em alguns momentos, foi necessário usar a IA para entender alguns erros e possíveis soluções, especialmente ao tentar usar o lowDB, uma biblioteca que nunca havia utilizado antes. No entanto, achei o resultado muito interessante. Agora, pode utilizar à vontade e adaptar para outros projetos. Muito legal!

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!