0

Problema

Não estou consguindo consultar minha API nodeJs com o axios. Eu já testei o backend inúmeras vezes com o Postman e tudo funciona corretamente, entretando com o axios sempre retorna o mesmo erro. Se alguém poder ajudar, desde já agradeço.

Trecho da API que esta sendo consultado

server.post('/insert', (req, res, next) => {

        const today = new Date();

        const userData = {
            first_name: req.body.first_name,
            last_name: req.body.last_name,
            email: req.body.email,
            password: req.body.password,
            created: today
        }

        knex('users')
            .where('email', req.body.email)
            .then((data) => {
                if (data.length) {
                    res.json("usuario já existente");
                } else {
                    knex('users').insert(userData)
                        .then((data) => {
                            res.json("usuario cadastrado com sucesso!");
                        })
                        .catch((error) => {
                            res.json("erro ao cadastrar usuário!")
                        });
                }

            })
            .catch(error => {
                res.send('error ' + error);
            });

    });

Lado cliente da aplicação - consulta com o axios

// Pacotes
import React from 'react';
import { Button, Card, Container, Col, Form, Row } from 'react-bootstrap';
import { useForm, ErrorMessage } from 'react-hook-form';
import { NavLink } from 'react-router-dom';
import axios from 'axios';


// Estilo
import './Login.css';


export default (props) => {

    const { register, handleSubmit, errors } = useForm();

    const onSubmit = (data) => {

        axios.post('http://localhost:3003/insert',{

            first_name: data.firstName,
            last_name: data.lastName,
            email: data.email,
            password: data.password

        })
        .then(function (response) {
            console.log(response);
          })
        .catch(function (error) {
            console.log(error);
          });



    }


    return (
        <Container id="loginContainer" fluid>
            <Row className="h-100">
                <Col lg="5" className="h-100 mx-auto">
                    <Card id="loginCard">
                        <Card.Header className="bg-white border-0">
                            <h4>Sing-Up</h4>
                        </Card.Header>
                        <Card.Body>
                            <Form onSubmit={handleSubmit(onSubmit)}>
                                <Form.Control type="text" className="rounded-pill mb-3" placeholder="firstName" name="firstName" autoComplete="off" ref={register({ required: true, maxLength: 20 })} />
                                <Form.Control type="text" className="rounded-pill mb-3" placeholder="lastName" name="lastName" autoComplete="off" ref={register({ required: true, maxLength: 20 })} />
                                <Form.Control type="text" className="rounded-pill mb-3" placeholder="email" name="email" autoComplete="off" ref={register({ required: true, maxLength: 20 })} />
                                <Form.Control type="text" className="rounded-pill mb-3" placeholder="password" name="password" autoComplete="off" ref={register({ required: true, maxLength: 20 })} />

                                <Button type="submit" variant="primary" className="rounded-pill mb-2" block>Submit</Button>
                            </Form>
                            <NavLink type="button" className="btn btn-success btn-block rounded-pill" to="/singIn">Sing-In</NavLink>
                        </Card.Body>
                    </Card>
                </Col>
            </Row>
        </Container>

    )
}

Erro que esta retornando

inserir a descrição da imagem aqui

1
  • Problema de CORS, ou seja, terá que habilitar na Api o acesso aqueles recursos. Isso não tem a ver com o front mas sim com o serviço!
    – LeAndrade
    Commented 28/03/2020 às 18:06

1 Resposta 1

0

Consegui resolver meu problema a partir da configuração do CORS. Como estou utilizando o restify tive que instalar restify-cors-middleware para fazer a configuração no backend:

Instalação

$ npm install restify-cors-middleware --save

Configuração básica

const cors = corsMiddleware({
  origins: ['http://localhost:3003'],
  allowHeaders: ['API-Token'],
  exposeHeaders: ['API-Token-Expiry']
})

server.pre(cors.preflight)
server.use(cors.actual)

restify-cors-middleware link: https://www.npmjs.com/package/restify-cors-middleware

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .