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
- Extract Query Screen
- Client enters their access data
- 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???
The address is fixed at
localhost:3000
, needs to point to production address to be able to communicate correctly– Denis Rudnei de Souza
@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...
– Thiago Peluque