Vercel CORS Error when trying to fetch from backend api also hosted on vercel

Im trying to fetch data from my api hosted on Vercel but it says cors error. I can fetch the data from insomnia and the same copy of the website locally just fine. The same link gives the cors error when the website went online.
Im also using Vercel to host the website.
Im using react for the website and axios to fetch.

using inspect element it shows strict-origin-when-cross-origin

Inspect Element Network Tab Section

Api vercel.json:

{
  "version": 2,
  "builds": [
    {
      "src": "index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/api/(.*)", // Assuming your API routes start with "/api/"
      "methods": ["GET", "OPTIONS", "PATCH", "DELETE", "POST", "PUT"],
      "headers": {
        "Access-Control-Allow-Credentials": "true",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET,OPTIONS,PATCH,DELETE,POST,PUT",
        "Access-Control-Allow-Headers": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"
      },
      "dest": "/index.js"
    },
    {
      "src": "/(.*)",
      "dest": "/index.js"
    }
  ]
}

Website vercel.json:

{
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Credentials", "value": "true" },
        { "key": "Access-Control-Allow-Origin", "value": "*" },
        { "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
        { "key": "Access-Control-Allow-Headers", "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" }
      ]
    }
  ],
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

I tried enabling cors from api and the vercel.json, it didnt work