Fetch API returns HTML instead of JSON

[dry wasp]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[glass loom]

bump, is this a bug?

[night mica]

are u sure the thing returns a json?

this tells me it's not found, are u missing anything?

@glass loom am i missing any request params/wrong method?

[glass loom]

that's exactly what I want to receive; the not found error

[night mica]

im getting the right response

try removing the accept, and send me the console.log

[glass loom]

my issue is with the fetch API specifically

[night mica]

no worries, can you console.log() the result and send me a screenshot?

[night mica]

send me your fetch statement please

like code

[glass loom]

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;
  }

[night mica]

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

[glass loom]

same issue; added that to try solving this

[night mica]

everything looks right to me, lemme try writing code for this

[subtle kite]

The header

Try doing this

Content-Type: application/json

Replace your current one

[glass loom]

already tried that also

[night mica]

yes I was just about to suggest this, but this is a response-only thing

[sullen granite]

Dang this is intense and interesting

[night mica]

im getting the right output

[sullen granite]

Try in incognito

[night mica]

are u sure ur username doesn't point to any other routes?

[glass loom]

do you mean using a incognito tab in the browser? same error 😦

[mighty wedge]

try await response.json()

[glass loom]

it throws an error because can't pass html to json

[night mica]

im getting what i need to

[sullen granite]

You need to parse the result

[mighty wedge]

is it working now after response.json()?

[night mica]

yep

[mighty wedge]

@glass loom try this

[sullen granite]

Nice now you can parse it

[glass loom]

can't parse, its returning HTML

[night mica]

I mean im getting the right output, idk where they're going wrong

[sullen granite]

Yeah that's weird

[mighty wedge]

can you paste more part of your code in https://paste.ec/ ?

[glass loom]

try using the fetch api

on NextJS

[night mica]

I am using the fetch api

[mighty wedge]

and send full error

[sullen granite]

Is it inside an async function?

[glass loom]

yep

in a use server file

[mighty wedge]

are you running this code on client side?

[night mica]

server

[sullen granite]

That's why

[night mica]

that was the problem

yep

[mighty wedge]

can you send your full file?

[sullen granite]

Look in your terminal

[mighty wedge]

and whats your nextjs version

Nope

[glass loom]

fetch api is a client side thing?

[night mica]

yeah

[sullen granite]

Not really it's ment to be used on the server

[mighty wedge]

Can you paste your full file?

[night mica]

but i've gotten issues running on server side

and nothing on client

[glass loom]

i can post the function

[sullen granite]

It's just server sends the client html

[night mica]

@glass loom have you also tried using axios?

[mighty wedge]

paste it on https://paste.ec/

[mighty wedge]

axios is not recommend for nextjs apps

[sullen granite]

If he is console logging on response on client

[night mica]

right but fetch isn't working

[glass loom]

https://paste.ec/paste/bueExhNb#EH3PEmzxHxsTqVB3A7feFwngM0iWpL0jpPBB6cwgOXx

[mighty wedge]

axios itself uses fetch if I'm right

[glass loom]

im console logging on the server-side

[sullen granite]

What do you see in your vscode terminal

You solhould see the console log there

[glass loom]

nothing if parsing to json, if parsing to text I see HTML.

[sullen granite]

Message me I can help

But in an hour

[glass loom]

actually json (without waiting for json to be parsed)

and yes, axios uses the fetch API do doesn't really matter

[mighty wedge]

it is working for me

[glass loom]

interesting

[night mica]

exactly, it worked for m too

[glass loom]

is it a use server file?

[mighty wedge]

I'm actually using a api file. I'll try with a use server file

[glass loom]

pls, mine is under app/

[mighty wedge]

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

what file have you sent the paste.ec link for?

[glass loom]

sorry i cant share the full file

[mighty wedge]

I just want to know where the file is inside src

[glass loom]

but ive tried your code and it still doesnt work for me, maybe an issue w my IP address or machine?

app/_actions.ts

[mighty wedge]

and where is the code being executed

in which file is the function being used

@glass loom

[glass loom]

im using in a page.tsx

under app too

[mighty wedge]

so app/page.tsx?

what is your nextjs version?

[glass loom]

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

[mighty wedge]

try running this on cmd: ```cmd
curl https://devforum.roblox.com/u/username.json

[glass loom]

works alright

so not my computer/ip

[mighty wedge]

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'
    },
  }
);

@glass loom

and if the issue still persists, send the error as a text

[glass loom]

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)

[mighty wedge]

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 @glass loom

and try using a different network

after restarting if still persists

[glass loom]

good idea, let me try that

tried both, no success

ill wait on advice from @sullen granite

[mighty wedge]

stackoverflow till then

[glass loom]

what version of nextjs did you use to make it work? @mighty wedge

also do you know any way i can clean nextjs cahce or anything

[mighty wedge]

delete .next folder

[glass loom]

this is prob not a code issue since its working for you

[mighty wedge]

TLS

[glass loom]

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?