Fetch API returns HTML instead of JSON
Unanswered
Japanese Bobtail posted this in #help-forum
Original message was deleted.
128 Replies
Japanese Bobtail
bump, is this a bug?
Original message was deleted
are u sure the thing returns a json?
this tells me it's not found, are u missing anything?
@Japanese Bobtail am i missing any request params/wrong method?
Japanese Bobtail
that's exactly what I want to receive; the not found error
try removing the accept, and send me the console.log
Japanese Bobtail
my issue is with the fetch API specifically
@Japanese Bobtail my issue is with the fetch API specifically
no worries, can you console.log() the result and send me a screenshot?
Japanese Bobtail
send me your fetch statement please
like code
Japanese Bobtail
try {
const response = await fetch(
`https://devforum.roblox.com/u/${username}.json`,
{
method: "GET",
headers: {
accept: "application/json",
},
}
);
console.log(await response.text());
return true;
} catch (error) {
return false;
}@Japanese Bobtail
try {
const response = await fetch(
`https://devforum.roblox.com/u/${username}.json`,
{
method: "GET",
headers: {
accept: "application/json",
},
}
);
console.log(await response.text());
return true;
} catch (error) {
return false;
}
u can actually remove the second argument, since default method is GET, and u prolly don't need the app/json accept tag
try that and tell me what u get
Japanese Bobtail
same issue; added that to try solving this
@Japanese Bobtail same issue; added that to try solving this
everything looks right to me, lemme try writing code for this
Japanese Bobtail
already tried that also
@linesofcode Content-Type: application/json
yes I was just about to suggest this, but this is a response-only thing
Chartreux
Dang this is intense and interesting
Chartreux
Try in incognito
Japanese Bobtail
do you mean using a incognito tab in the browser? same error 😦
@rithul are u sure ur username doesn't point to any other routes?
try
await response.json()Japanese Bobtail
it throws an error because can't pass html to json
im getting what i need to
Chartreux
You need to parse the result
@rithul Click to see attachment
is it working now after response.json()?
yep
@Anay-208 try `await response.json()`
@Japanese Bobtail try this
Chartreux
Nice now you can parse it
Japanese Bobtail
can't parse, its returning HTML
Chartreux
Yeah that's weird
@Japanese Bobtail can't parse, its returning HTML
can you paste more part of your code in https://paste.ec/ ?
@rithul I mean im getting the right output, idk where they're going wrong
Japanese Bobtail
try using the fetch api
on NextJS
@Japanese Bobtail try using the fetch api
I am using the fetch api
and send full error
Chartreux
Is it inside an async function?
Japanese Bobtail
yep
in a use server file
Chartreux
are you running this code on client side?
Chartreux
That's why
that was the problem
can you send your full file?
yep
Chartreux
Look in your terminal
and whats your nextjs version
Original message was deleted
Nope
Japanese Bobtail
fetch api is a client side thing?
yeah
Chartreux
Not really it's ment to be used on the server
@Japanese Bobtail fetch api is a client side thing?
Can you paste your full file?
@Chartreux Not really it's ment to be used on the server
but i've gotten issues running on server side
and nothing on client
Japanese Bobtail
i can post the function
Chartreux
It's just server sends the client html
@Japanese Bobtail have you also tried using axios?
@rithul <@760945133210042418> have you also tried using axios?
axios is not recommend for nextjs apps
Chartreux
If he is console logging on response on client
@Anay-208 axios is not recommend for nextjs apps
right but fetch isn't working
axios itself uses fetch if I'm right
Japanese Bobtail
im console logging on the server-side
Chartreux
What do you see in your vscode terminal
You solhould see the console log there
Japanese Bobtail
nothing if parsing to json, if parsing to text I see HTML.
Chartreux
Message me I can help
But in an hour
Japanese Bobtail
actually json (without waiting for json to be parsed)
and yes, axios uses the fetch API do doesn't really matter
Japanese Bobtail
interesting
@Anay-208 it is working for me
exactly, it worked for m too
Japanese Bobtail
is it a use server file?
@Japanese Bobtail is it a use server file?
I'm actually using a api file. I'll try with a use server file
Japanese Bobtail
pls, mine is under app/
this is my code:
"use server";
import Image from 'next/image'
import standard from "./standard.gif"
export default async function Home() {
try {
const response = await fetch(
`https://devforum.roblox.com/u/username.json`,
{
method: "GET",
}
);
console.log(await response.json());
} catch (error) {
}
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-and its working fine
Original message was deleted
what file have you sent the paste.ec link for?
Japanese Bobtail
sorry i cant share the full file
@Japanese Bobtail sorry i cant share the full file
I just want to know where the file is inside src
Japanese Bobtail
but ive tried your code and it still doesnt work for me, maybe an issue w my IP address or machine?
app/_actions.ts
and where is the code being executed
in which file is the function being used
@Japanese Bobtail
Japanese Bobtail
im using in a page.tsx
under app too
so app/page.tsx?
what is your nextjs version?
Japanese Bobtail
export default async function Home({
params,
}: {
params: { id: string; i: number };
}) {
console.log(await devForumLinkExists("username"));
return (
<main className="flex min-h-screen flex-col items-center gap-8 p-12">
<Navigation params={params} />
<Submission params={params} />
</main>
);
}14.1.0
try running this on cmd:
curl https://devforum.roblox.com/u/username.jsonJapanese Bobtail
works alright
so not my computer/ip
try using this:
const response = await fetch(
`https://devforum.roblox.com/u/username.json`,
{
method: "GET",
headers: {
'accept': 'application/json',
'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3'
},
}
);@Japanese Bobtail
and if the issue still persists, send the error as a text
Japanese Bobtail
SyntaxError: Unexpected token '<', "<HTML><HEA"... is not valid JSON
at JSON.parse (<anonymous>)
at parseJSONFromBytes (node:internal/deps/undici/undici:6662:19)
at successSteps (node:internal/deps/undici/undici:6636:27)
at node:internal/deps/undici/undici:1236:60
at node:internal/process/task_queues:140:7
at AsyncResource.runInAsyncScope (node:async_hooks:206:9)
at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)this issue needs to be escalated to stackoverflow, and if no reply, then directly to next.js github
and before that
try restarting your system @Japanese Bobtail
and try using a different network
after restarting if still persists
Japanese Bobtail
good idea, let me try that
Japanese Bobtail
tried both, no success
ill wait on advice from @Chartreux
stackoverflow till then
Japanese Bobtail
what version of nextjs did you use to make it work? @Anay-208
also do you know any way i can clean nextjs cahce or anything
Japanese Bobtail
this is prob not a code issue since its working for you
Japanese Bobtail
hi all, just bumping this issue i just noticed the HTML it returns is from a 403 error page. Meaning, there's some kind of block w my request.
What I dont understand is that it works if I do the request in the terminal, so can't be my IP
thoughts?
@Anay-208 axios itself uses fetch if I'm right
no it doesn't, but it does use similar underlying web apis as undici (default fetch)