Vercel 上托管的 React 应用程序与 Azure 上托管的容器应用程序中的 Express JS API 之间的 Cors 问题

Question

我们有一个在 Azure 上的容器应用程序中运行的 Express JS REST API。此应用程序使用 cors 包中间件来允许来自所有来源的 CORS。

// 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));

这一直适用于多个前端网络应用程序。今天我们使用 Vercel 部署了一个快速的 React 项目。此应用无法从 API 取回数据。

CORS 策略已阻止从来源“https://dev.otherwebsite.com”访问位于“https://dev.example.com/api/cc/validate-code”的 XMLHttpRequest：对预检请求的响应不通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我们已将 cors 选项更改为我们在该论坛上找到的多项内容：

尝试 1

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

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

尝试 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();
});

尝试 3

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

尝试 4

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

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

我们还尝试在前端应用程序上添加一个 vercel.json 文件

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

我们做错了什么？

Answer 1

尝试：

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
            }))