CORS 违规发生在 Safari 中，但不是 chrome

Question

我有一个 React Web 应用程序，可以调用 Express Web 服务器。

当我在 Chrome 中访问网络应用程序时，一切都按预期运行。

当我在 safari 中访问 Web 应用程序时，出现错误：

XMLHttpRequest cannot load https://subdomain.example.com/path due to access control checks.

谷歌搜索表明这是一个 CORS 错误。我的express api使用npm包设置cors：

const express = require('express');
const cors = require('cors');

const app = express();

(async () => {
    app.use(cors());

    app.use('/path', [
       require('./apis/path'),
    ]);

}()

这篇文章解释了 safari 比 chrome 有更严格的 CORS 策略，并且不能使用通配符并且必须包含架构。所以我尝试指定允许的来源：

app.use(cors({ origin: ['https://app.example.com', 'https://other-app.example.com'] }));

错误保持不变。

我还有什么遗漏的吗？

Answer 1

Safari 确实不支持 Access-Control-Allow-Headers 的通配符 *。为此写了一个基本的解决方案，尝试一下并让我知道！

const express = require('express');
const cors = require('cors');

const app = express();
 
const corsOptions = {
    origin: ['https://app.example.com', 'https://other-app.example.com'],
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
    credentials: true,
    optionsSuccessStatus: 204
};
 
app.use(cors(corsOptions));

// Handle preflight requests
app.options('*', cors(corsOptions));

app.use('/path', [
    require('./apis/path'),
]);

app.listen(3000, () => {
    console.log('Server running on port 3000');
});