Doubts Fetch Nextjs

Asked

Viewed 22 times

0

Good morning, everyone! I went up a site made in Nextjs for Umbler and after that I started having problems with the queries in the Apis.

Today I have the following structure

  1. Extract Query Screen
  2. Client enters their access data
  3. The site queries via fetch to the Nextjs Route API
async function onSubmitForm(values) {
    fetch("http://localhost:3000/api/extrato", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*"
      },
      body: JSON.stringify({
        usuario: values.usuario,
        password: sha256(values.password),
      }),
    })
      .then((result) => result.json())
      .then((json) => {
        setDados(json.cliente[0]);
      })
      .catch((err) => {
        console.log(err);
        setErro("Credenciais Inválidas");
      });  
  }

EXTRACT API I created in Nextjs

import { baseUrl } from '../../lib/madeiranit'
import NextCors from "nextjs-cors";

export default async (req, res) => {

    await NextCors(req, res, {
      // Options
      methods: ["GET", "HEAD", "PUT", "PATCH", "POST", "DELETE"],
      origin: "*",
      optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
    });

    const headers = new Headers();

    const resultToken = await fetch('http://localhost:3000/api/token')
    const jsonToken = await resultToken.json();
    headers.append('Authorization', 'Bearer '+jsonToken.token)
    headers.append("Access-Control-Allow-Origin", "*");

    const { usuario, password } = req.body;

    const result = await fetch(`${baseUrl}/cliente?doccliente=${usuario}&password=${password}`,{
        method: 'GET',
        headers: headers,
    });
    const json = await result.json();
    res.status(200).json({
        cliente: json.cliente
    });
}

But when I try to query my data, it returns the error Failed to Fetch. I couldn’t understand why. It doesn’t seem to be a problem with CORS.

login-5d46bc05feaab9354c09.js:1 POST http://localhost:3000/api/extrato net::ERR_CONNECTION_REFUSED
(anonymous) @ login-5d46bc05feaab9354c09.js:1
s @ commons.fbad2cb58ea86ef96563.js:1
(anonymous) @ commons.fbad2cb58ea86ef96563.js:1
(anonymous) @ commons.fbad2cb58ea86ef96563.js:1
n @ ca666604fbb14b89519c753189f247d656a1726c.6f3275e52893e775ba64.js:1
o @ ca666604fbb14b89519c753189f247d656a1726c.6f3275e52893e775ba64.js:1
(anonymous) @ ca666604fbb14b89519c753189f247d656a1726c.6f3275e52893e775ba64.js:1
(anonymous) @ ca666604fbb14b89519c753189f247d656a1726c.6f3275e52893e775ba64.js:1
v @ login-5d46bc05feaab9354c09.js:1
(anonymous) @ login-5d46bc05feaab9354c09.js:1
(anonymous) @ ca666604fbb14b89519c753189f247d656a1726c.6f3275e52893e775ba64.js:1
async function (async)
(anonymous) @ ca666604fbb14b89519c753189f247d656a1726c.6f3275e52893e775ba64.js:1
We @ framework.2d0daf90a2fa7e03281a.js:1
Ye @ framework.2d0daf90a2fa7e03281a.js:1
(anonymous) @ framework.2d0daf90a2fa7e03281a.js:1
xr @ framework.2d0daf90a2fa7e03281a.js:1
Cr @ framework.2d0daf90a2fa7e03281a.js:1
(anonymous) @ framework.2d0daf90a2fa7e03281a.js:1
De @ framework.2d0daf90a2fa7e03281a.js:1
(anonymous) @ framework.2d0daf90a2fa7e03281a.js:1
Or @ framework.2d0daf90a2fa7e03281a.js:1
Zt @ framework.2d0daf90a2fa7e03281a.js:1
Jt @ framework.2d0daf90a2fa7e03281a.js:1
t.unstable_runWithPriority @ framework.2d0daf90a2fa7e03281a.js:1
Wl @ framework.2d0daf90a2fa7e03281a.js:1
Me @ framework.2d0daf90a2fa7e03281a.js:1
Xt @ framework.2d0daf90a2fa7e03281a.js:1
login-5d46bc05feaab9354c09.js:1 TypeError: Failed to fetch

Any idea what it could be??? something I’m missing on the API call???

  • 1

    The address is fixed at localhost:3000, needs to point to production address to be able to communicate correctly

  • @Denisrudneidesouza really made the change and it worked. I was keeping this way because at the opening of the site I consume an API from the same server where I bring the prizes to be redeemed and use the localhost:3000 and it works but I use getInitialProps(). In that case it works... but I appreciate the quick feedback...

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.