3

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

learningpath
  • 31
  • 1
  • 3

3 Answers3

8

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.

mapoul
  • 81
  • 1
  • 3
1

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": "*" }
          ]
        }  
    ]
}
Marcia Moss
  • 189
  • 5
-1

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" }
      ]
    }
  ]
}
Zal
  • 32
  • 1
  • 4