Nest.js 即使启用了 cors 也会出现 cors 错误
Nest.js is giving cors error even when cors is enabled
我正在开发一个 next.js 应用程序,以 nest.js 作为后端。现在,即使我在 nest.js.
的 main.ts
文件中启用了 cors,我也会遇到 cors 错误
这是我的 main.ts 文件。
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import cookieParser from 'cookie-parser';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
if (process.env.APP_ENV !== 'production') {
app.enableCors({
allowedHeaders: '*',
origin: '*',
credentials: true,
});
} else {
app.enableCors({
origin: process.env.FE_URL,
credentials: true,
});
}
app.use(cookieParser());
await app.listen(process.env.PORT || 5000);
}
bootstrap();
我也尝试了以下方法。
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import cookieParser from 'cookie-parser';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
app.enableCors({
allowedHeaders: '*',
origin: '*',
credentials: true,
});
app.use(cookieParser());
await app.listen(process.env.PORT || 5000);
}
bootstrap();
我也试过这个
app.enableCors({
origin: 'http://localhost:3000',
credentials: true,
});
现在,在 _app.js
的前端,我正在定义 Axios 全局配置,如下所示。
axios.defaults.baseURL = 'http://localhost:5000';
axios.defaults.withCredentials = true;
然后在我的 login.tsx
文件中,我将请求发送到 nest.js 应用程序,如下所示。
const {data } = await axios.post('/auth/login', values);
这里的值是一个有用户名和密码的对象。
这是错误。
我还尝试了其他 Whosebug 问题的所有其他解决方案。但是 none 解决了我的问题。它实际上在几天前工作。我不知道发生了什么。
我在这里做错了什么?它现在让我发疯了。如果您需要,我可以提供更多代码。
如 MDN Web Docs about CORS, you cannot use the wildcard (*
), whether it be to allow an origin or request headers (or request methods), in conjunction with credentialed requests. A more authoritative, but perhaps more dry, source is the Fetch standard 中所述:
For Access-Control-Expose-Headers
, Access-Control-Allow-Methods
, and Access-Control-Allow-Headers
response headers, the value *
counts as a wildcard for requests without credentials. For such requests there is no way to solely match a header name or method that is *
.
因此,而不是
app.enableCors({
allowedHeaders: '*',
origin: '*',
credentials: true,
});
你应该完全避开通配符并明确指定允许的来源和允许的请求 headers,像这样:
app.enableCors({
allowedHeaders: ['content-type'],
origin: 'http://localhost:3000',
credentials: true,
});
在我的例子中,我遵循了 official docs 的说明,下面是在 nestjs
上启用 CORS
const app = await NestFactory.create(AppModule);
app.enableCors();
await app.listen(3000);
但由于很久以前安装的 CORS 插件,我仍然遇到 CORS 错误。
所以我关闭了浏览器中的“允许 CORS”插件,错误消失了。 (如果您有任何类似的插件,请将其关闭,看看它是否适合您。)
我正在开发一个 next.js 应用程序,以 nest.js 作为后端。现在,即使我在 nest.js.
的main.ts
文件中启用了 cors,我也会遇到 cors 错误
这是我的 main.ts 文件。
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import cookieParser from 'cookie-parser';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
if (process.env.APP_ENV !== 'production') {
app.enableCors({
allowedHeaders: '*',
origin: '*',
credentials: true,
});
} else {
app.enableCors({
origin: process.env.FE_URL,
credentials: true,
});
}
app.use(cookieParser());
await app.listen(process.env.PORT || 5000);
}
bootstrap();
我也尝试了以下方法。
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import cookieParser from 'cookie-parser';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
app.enableCors({
allowedHeaders: '*',
origin: '*',
credentials: true,
});
app.use(cookieParser());
await app.listen(process.env.PORT || 5000);
}
bootstrap();
我也试过这个
app.enableCors({
origin: 'http://localhost:3000',
credentials: true,
});
现在,在 _app.js
的前端,我正在定义 Axios 全局配置,如下所示。
axios.defaults.baseURL = 'http://localhost:5000';
axios.defaults.withCredentials = true;
然后在我的 login.tsx
文件中,我将请求发送到 nest.js 应用程序,如下所示。
const {data } = await axios.post('/auth/login', values);
这里的值是一个有用户名和密码的对象。
这是错误。
我还尝试了其他 Whosebug 问题的所有其他解决方案。但是 none 解决了我的问题。它实际上在几天前工作。我不知道发生了什么。
我在这里做错了什么?它现在让我发疯了。如果您需要,我可以提供更多代码。
如 MDN Web Docs about CORS, you cannot use the wildcard (*
), whether it be to allow an origin or request headers (or request methods), in conjunction with credentialed requests. A more authoritative, but perhaps more dry, source is the Fetch standard 中所述:
For
Access-Control-Expose-Headers
,Access-Control-Allow-Methods
, andAccess-Control-Allow-Headers
response headers, the value*
counts as a wildcard for requests without credentials. For such requests there is no way to solely match a header name or method that is*
.
因此,而不是
app.enableCors({
allowedHeaders: '*',
origin: '*',
credentials: true,
});
你应该完全避开通配符并明确指定允许的来源和允许的请求 headers,像这样:
app.enableCors({
allowedHeaders: ['content-type'],
origin: 'http://localhost:3000',
credentials: true,
});
在我的例子中,我遵循了 official docs 的说明,下面是在 nestjs
上启用 CORSconst app = await NestFactory.create(AppModule);
app.enableCors();
await app.listen(3000);
但由于很久以前安装的 CORS 插件,我仍然遇到 CORS 错误。
所以我关闭了浏览器中的“允许 CORS”插件,错误消失了。 (如果您有任何类似的插件,请将其关闭,看看它是否适合您。)