Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Blocked by CORS Policy

Olá tudo bem? Estou com o seguinte problema.

Quando o eu crio e submeto um autor com as informações corretas, sou informado que o POST para cadastrar um novo autor de erro:

Access to fetch at 'http://localhost:8000/api/autor' from origin 'http://localhost:3000' has been blocked by CORS policy

Tentei colocar o 'Access-Control-Allow-Origin': '*' no fetch e ficou assim:

    CriaAutor: autor =>{
        return fetch('http://localhost:8000/api/autor', {method: 'POST', headers: {'content-type': 'application/json', 'Access-Control-Allow-Origin': '*'}, body: autor})
            .then(res => res.json());
    },

Mas o erro ainda persiste. Teria que habilitar o CORS no lado do servidor também?

5 respostas

Olá novamente, tentei adicionar a 'Access-Control-Allow-Origin': '*' no lado do servidor também:

app.post("/api/autor", (req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    console.log(req.body)

[...resto do código...]

O erro de cors sumiu do navegador, entretanto um novo erro apareceu:

POST http://localhost:8000/api/autor 400 (Bad Request)

Percebi que a requisição enviada está com o body vazio. E os erros são os seguintes:

{"error":"preço não especificado,livro não especificado"}

O que estou errando? O meu CriaAutor Esta da seguinte forma:

    CriaAutor: autor =>{
        return fetch('http://localhost:8000/api/autor', {method: 'POST', headers: {'Access-Control-Allow-Origin': '*', 'content-type': 'aplication/json'}, body: autor})
            .then(res => res.json());
    },

E meu autor recebido na função está com as informações preenchidas tanto para livro e preço e convertido para string pelo JSON.stringify() .

Fala ai Renan, tudo bem? Muito bom ter resolvido o problema de CORS, parabéns.

Sobre o segundo, talvez você precise transformar seus dados para string, você pode utilizar o JSON.stringify:

CriaAutor: autor =>{
        return fetch('http://localhost:8000/api/autor', {method: 'POST', headers: {'Access-Control-Allow-Origin': '*', 'content-type': 'aplication/json'}, body: JSON.stringify(autor)})
            .then(res => res.json());
    },

Espero ter ajudado.

Olá Matheus vlw pela ajuda, então, mesmo adicionando o JSON.stringfy não deu certo, continua com o body vazio.

ApiService.CriaAutor(JSON.stringify(autor))
      .then(res => ApiService.TrataErros(res))
      .then(res => {
        if (res.message === 'success') {
          this.setState({ autores: [...this.state.autores, res.data] })
          PopUp.exibeMensagem('success', 'Autor Adicionado!')
        }
      })
      .catch(err => {
        PopUp.exibeMensagem('error', 'Erro ao Tentar Criar!')
      })

Seria ainda algo relacionado ao cors? Para os outros métodos como GET e DELETE funcionam normalmente, somente quando utilizo o POST, é que da esse erro.

solução!

Haha nossa encontrei o erro, estava colocando content-type': 'aplication/json quando era content-type': 'application/json, agora funciona. Vlww pela ajuda Matheus!

Boa Renan, fico feliz que tenha resolvido seu problema, parabéns.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software