How to enable CORS not working on vercel?

Question

I have build the api server with nodeJS and Express

Then I enabled CORS with the package CORS

import cors from "cors";
const app = express();
app.use(
  cors({
    origin: "*",
  })
);

Vercel configuration:

{
  "version": 2,
  "builds": [
    {
      "src": "./index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "./index.js"
    }
  ]
}

However, I always have the CORS error when access to the API server on vercel.

Access to XMLHttpRequest at 'https://apiurl/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

---

I was testing on my local with setting enable CORS. There is problem with the snippet code above.

Please point me out what is something wrong here.

Thank you

Capelin

Answer 1

I know im answering a pretty old post, but i've just battled with this issue my self for the better part of two days, so if someone else stumbles up this, i hope it can help.. What solved the issue for me was the following in the vercel.json:

Change from:

{
  "version": 2,
  "builds": [
    {
      "src": "./index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "./index.js"
    }
  ]
}

To:

{
  "version": 2,
  "builds": [
    {
      "src": "./index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "./index.js",
      "methods": ["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"],
      "headers": {
        "Access-Control-Allow-Origin": "*"
      }
    }
  ]
}

Turns out vercel overwrites the cors settings you put anywhere outside the json. It's not possible to mix a headers array and routes array in the same file. But you can just put a header inside the routes. Dont forget the methods, particularly the options, since it apparently converts many requests into an options request.

Papotto

a lifesaver and timesaver indeed. Putting the headers in routes did the trick for me – Gossoon

You are my hero today! – Tortuga

Answer 2

The header has to be its own key for specifying access-control-allow-origin and "routes" will need to be replaced with "rewrite" as header and route keys don't go together. And If there are few different domains for your app, header object needs to be duplicated within the outer header array for each domain for access control origin issue. https://vercel.com/docs/project-configuration Eg:

{
    "version": 2,
    "builds": [
        {
            "src": "./index.py",
            "use": "@vercel/python"
        }
    ],
    "rewrites": [
        { "source": "/(.*)", "destination": "src/app.js" }
    ],
    "headers": [
        {
          "source": "/(.*)",
          "headers": [
            { "key": "Access-Control-Allow-Origin", "value": "*" }
          ]
        },
        {
          "source": "/vercel_app_domain_name/(.*)",
          "headers": [
            { "key": "Access-Control-Allow-Origin", "value": "*" }
          ]
        }  
    ]
}

Kinematics

Answer 3

I had luck using this in my vercel.json

{
  "version": 2,
  "builds": [
    {
      "src": "./index.js",
      "use": "@vercel/node"
    }
  ],

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

Mattiematting

Can you explain what it does compared to OP configuration? – Ethridge

Answer 4

add this to your Vercel configuration:

{
  "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" }
      ]
    }
  ]
}

Yamauchi

I already tried this also but the deployment failed – Trave

Answer 5

For my scenario (axios + POST + json over http in dev environment), the root cause was 'Content-Type':'application/json' is NOT supported for POST CORS.
See https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

The solution is to JSON.stringify() request payload with header 'Content-Type': 'text/plain' .
I still needed the additional headers in vercel.json as suggested in other replies, interestingly only in dev as prod was fine.

Musician