I've recently implemented a reporting system for my website, I got it working on my laptop, but when I deployed it into vercel, it would give a "bad request" when using fetch. I don't think I'm doing anything wrong?

@app.route("/vulnerability/get",methods=["POST"])
def report_get():
  return get_report(request.json.get("id"))

Here's the code to make the fetch request:

/report/manage/[slug]/+page.ts

import { serverURL } from '../../../../serverContactor';

export async function load({ params,fetch }){
    let code=params.slug;
    let body = {"id":code as string};
    const dataRequest = await fetch(`${serverURL}/vulnerability/get`,{
        method:"POST",
        headers:{"Content-Type":"application/json"},
        body: JSON.stringify(body)
    });
    let data;
    try {
        data = await dataRequest.json();
    } catch(error) {
        return {"Error":true,"name":error as string,"response":dataRequest, "code":code as string}
    }
    return data;
}

Which causes the application to log this:

{
  Error: true,
  name: SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON
      at JSON.parse (<anonymous>)
      at Proxy.<anonymous> (file:///var/task/.svelte-kit/output/server/index.js:693:25)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async load (file:///var/task/.svelte-kit/output/server/entries/pages/report/manage/_slug_/_page.ts.js:14:12)
      at async load_data (file:///var/task/.svelte-kit/output/server/index.js:600:18)
      at async file:///var/task/.svelte-kit/output/server/index.js:2085:18,
  response: Response {
    status: 400,
    statusText: 'Bad Request',
    headers: Headers {
      'access-control-allow-credentials': 'true',
      'access-control-allow-headers': 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version',
      'access-control-allow-methods': 'GET,OPTIONS,PATCH,DELETE,POST,PUT',
      'access-control-allow-origin': 'https://frii-site-frontend-ezejbxuv9-ctih1s-projects.vercel.app',
      'cache-control': 'public, max-age=0, must-revalidate',
      connection: 'keep-alive',
      'content-length': '167',
      'content-type': 'text/html; charset=utf-8',
      date: 'Wed, 10 Jul 2024 07:06:09 GMT',
      server: 'Vercel',
      'strict-transport-security': 'max-age=63072000',
      vary: 'Origin',
      'x-vercel-cache': 'MISS',
      'x-vercel-id': 'arn1:sfo1:sfo1:iad1::iad1::kf868-1720595169898-50deaf4d69a8'
    },
    body: ReadableStream { locked: true, state: 'closed', supportsBYOB: true },
    bodyUsed: true,
    ok: false,
    redirected: false,
    type: 'basic',
    url: 'https://server.frii.site/vulnerability/get'
  },
  code: 'WYC6EG9oYpNClQYtUdBSFovH'
}

Using insomnia works fine though, it only seems to happen with fetch.

The application works if the frontend is run locally, the where the backend is hosted doesn't impcat anything. I also use the same endpoint in another page, which works fine.

/report/track/+page.ts

import { serverURL } from '../../../serverContactor';

export async function load({ url,fetch }) {
    let code:string|null=url.searchParams.get("code");
    let body = {
        "id":code
    };
    const dataRequest = await fetch(`${serverURL}/vulnerability/get`,{
        method:"POST",
        headers:{"Content-Type":"application/json"},
        body: JSON.stringify(body)
    });
    const data = await dataRequest.json();
    return data;
}  

but the following code works in playcode.io

async function load(params:string,serverURL:string) {
    let code=params;
    let body = {"id":code as string};

    const dataRequest = await fetch(`${serverURL}/vulnerability/get`,{
        method:"POST",
        headers:{"Content-Type":"application/json"},
        body: JSON.stringify(body)
    });
    let data;
        dataRequest.text().then(text=>{
            console.log(`Headers: ${dataRequest.headers} body: ${dataRequest.body} body used: ${dataRequest.bodyUsed} text: ${text} code:${code}`);
        });
    return data;
}

P.S: I'm using SvelteKit for the frontend

I've found a very hacky-ish fix

It seems like fetching the index endpoint before making the request seems to make it work? I have no idea why it does, nor do I really care.

Here's an example:

import { serverURL } from '../../../serverContactor';

export async function load({ url }) {
    let code:string|null=url.searchParams.get("code");
    await fetch(`${serverURL}`).then(response=>{console.log(response.status)});
    const dataRequest = await fetch(`${serverURL}/vulnerability/get`,{
        method:"POST",
        headers:{"Content-Type":"application/json"},
        body: JSON.stringify({"id":code})
    });
    const data = await dataRequest.json();
    return data;
}