I'm encountering an issue with my React web app that communicates with an Express web server.
While everything functions correctly in Chrome, I'm facing an error when accessing the app in Safari:
XMLHttpRequest cannot load https://subdomain.example.com/path due to access control checks.
Upon checking the network tab, I noticed the failed call:
Summary
URL: https://api.example.com/path
Status: —
Source: —
Initiator:
2.6ac8194f.chunk.js:2:223735
Request
Accept: application/json, text/plain, */*
Authorization: Bearer [...]
Origin: https://app.example.com
Referer: https://app.example.com/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Safari/605.1.15
Response
No response headers
Research indicates that this is a CORS error. I've set up CORS in my Express API using the npm package:
const express = require('express');
const cors = require('cors');
const app = express();
(async () => {
app.use(cors());
app.use('/path', [
require('./apis/path'),
]);
}()
After reading this article, I learned that Safari has more stringent CORS policies compared to Chrome. I tried specifying allowed origins like this:
app.use(cors({ origin: ['https://app.example.com', 'https://other-app.example.com'] }));
However, the error persisted. Am I overlooking something important here?