需要帮助解决与全栈应用Angular 和 NestJS不一致的 CORS 政策问题

如何解决需要帮助解决与全栈应用Angular 和 NestJS不一致的 CORS 政策问题

我想弄清楚为什么会发生这个问题，我已经无计可施了。有时，通常在第一次请求资源时，服务器不会附加 Access-Control-Allow-Origin 标头，但如果您刷新并再次尝试请求它通常会起作用。我会说这个错误发生在 1/10 的请求中（至少感觉是这样）。

幸运的是，nestJS 内置了 CORS 功能，所以我所做的唯一配置是：

const app = await nestFactory.create<nestExpressApplication>(AppModule);

app.enableCors({
    origin: [/http:\/\/localhost/,/https?:\/\/([a-z0-9]+[.])*example.com/],methods: ['GET','POST','PUT','DELETE','PATCH','OPTIONS'],allowedHeaders: ['Content-Type','Authorization','Accept','X-Requested-With'],credentials: true,preflightContinue: true,optionsSuccessstatus: 200
});

...

我还观察到，简单地使用像下面这样的不太安全的配置仍然会时不时地导致相同的请求失败。这对我来说没有意义，因为任何来源都应该是“有效的”，但它仍然失败。

app.enableCors({
    origin: true,'OPTIONS']
});

在 Angular 方面，我刚刚得到了一个将 withCredentials 字段设置为 true 的请求拦截器。

从客户端看到的错误：

Access to fetch at 'https://api.example.com/api/blog/posts' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs,set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

有时，它也是由 XMLHttpRequest 对象产生的...

Access to XMLHttpRequest at 'https://api.example.com/api/home' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

使这变得困难的是，它似乎在大部分时间都有效，但偶尔会导致失败。

感谢您的帮助！