Cors 不适用于两个不同的来源

Question

我有两台服务器，前端 (Next.js) 和后端 (express.js api 服务器)。

前端服务器运行没有任何添加。但是我有一个后端的 nginx 代理。

到目前为止一切都很好，因为它们还没有连接。

前端：正常工作。
后端：我可以直接从后端本身调用（通过自身来源）。

当我从前端服务器向后端服务器进行 fetch get 调用时，通常会出现 cors 错误，因为来源不同。

为此，我将后端服务器设置为 cors:

// /src/middlewares/cors.ts
import cors from 'cors';
const whitelist = new Set(['http://192.168.1.106:3000', 'https://192.168.148.132']);
// frontend: http://192.168.1.106:3000
// backend: https://192.168.148.132
const corsOptions = {
  optionsSuccessStatus: 200,
  origin: (origin: any, callback: any) => {
    console.log('origin: ' + origin);
    if (whitelist.has(origin)) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  },
  //   credentials: true,
};
export default cors(corsOptions);

和

// /app.ts
import cors from './middlewares/system/cors.js';
.
.
// setup cors
app.options('*', cors);
app.use(cors);
.
.

这样做之后，我达到了我的主要目标。前端服务器可以调用后端服务器。输出：

但是这次我发现了一个问题。我无法再向后端发送自我请求（通过自我来源）。

在处理这个问题时，我查看了上面显示的 /src/middlewares/cors.ts 文件的来源。

对于前端：
后端：

我在 nginx 中使用自签名 ssl 作为后台服务器。而且conf中没有任何cors相关的头文件。

我该如何解决这种情况？

（如有遗漏，可在评论中指出。）

Answer 1

Origin header 仅在 cross-origin 请求中设置。如果你直接调用你的后端，Javascript 值为 undefined，在这种情况下你不能限制任何东西。例如，您可以写

if (!origin || whitelist.has(origin)) {
  callback(null, true);
}

Cors 不适用于两个不同的来源

Cors is not working for two different origins

javascript

nginx

cors

express