External fetch API (Forbidden)

[frodrigues]

I’m trying to fetch from an external api but I get (forbidden).

Locally it works ok.
I added the vercel.json file with headers, in the admin I enabled OPTIONS Allowlist and entered the path /api.

What could be missing?

Using astro framework

  const res = await fetch('EXTERNAL_API',
    {
      headers: {

        "Content-Type": "application/json",
        "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" 
      },
    });

    const result= await res.json();

added vercel.json
OPTIONS Allowlist -> /api

[pawlean (Pauline P. Narvas)]

Hi, @frodrigues! Welcome to the Vercel Community

CORS errors are always the most frustrating. Sorry to hear this! Let’s try and get to a solution In case anyone else stumbles upon this post, we also have a helpful guide on this topic:

How to Enable CORS on Vercel

For your specific case, could you try and:

1. Remove CORS headers from your fetch request. They should be set on the server side, not in the client-side fetch.
2. Update your vercel.json to include CORS headers for all routes:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "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" }
      ]
    }
  ]
}

3. Redeploy your app after making these changes.
4. If the issue persists, check if the external API allows requests from your Vercel deployment’s domain.

If you’re still encountering problems, please provide more details about the external API and the exact error message you’re receiving

Let us know how you get on!