Cors issue between React app hosted on Vercel and an Express JS API in a container app hosted on Azure

Question

We have an Express JS REST API running in a container app on Azure. This app is using the cors package middleware to allow CORS from all origins.

// Create app
const app = express();

// Body parser
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// Cors
const corsOptions = {
    origin: true,
    credentials: true,
};

app.use(cors(corsOptions));

This has been working for multiple frontend web apps. Today we have deployed a quick React project using Vercel. This app isn't able to get data back from the api.

Access to XMLHttpRequest at 'https://dev.example.com/api/cc/validate-code' from origin 'https://dev.otherwebsite.com' 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.

We have changed the cors options to multiple things we found on this forum:

Attempt 1

app.use(cors({
    origin: true,
    optionsSuccessStatus: 200,
    credentials: true,
}));

app.options('*', cors({
    origin: true,
    optionsSuccessStatus: 200,
    credentials: true,
}));

Attempt 2

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", req.headers.origin);
    res.header("Access-Control-Allow-Credentials", "true");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

Attempt 3

app.use(cors());
app.options('*', cors());

Attempt 4

app.options('*', (req, res) => {
    res.set('Access-Control-Allow-Origin', '*');
    res.send('ok');
});

app.use((req, res) => {
    res.set('Access-Control-Allow-Origin', '*');
});

We also tried to add a vercel.json file on the frontend app

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

What are we doing wrong?

[Edit 1]

We have deployed the code to a different domain and different service and it's working. So it seems like a Vercel specific problem. Still looking for a solution.

Answer 1

Try:

app.use(cors({
                origin: '*',
                methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEADER', 'OPTIONS'],
                allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With', 'Accept'],
                exposedHeaders: ['Content-Type'],
                credentials: true,
                preflightContinue: false,
                optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
            }))