我正在用nest.js作为后端开发一个next.js应用程序。现在,即使我在nest.js的main.ts
文件中启用了cors,我也会遇到cors错误。
这是我的主要.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);
这里的values是一个对象,它有用户名和密码。
这里是错误。
我也尝试了其他StackOverflow问题的所有解决方案,但没有一个解决了我的问题,几天前它还有效,我不知道发生了什么。
我做错了什么?它已经把我逼疯了。如果你需要,我可以提供更多的代码。
3条答案
按热度按时间kq4fsx7k1#
如MDN Web Docs中有关CORS的说明所述,无论是允许源还是请求标头(或请求方法),都不能将通配符(
*
)与认证请求结合使用。更权威但可能更枯燥的来源是Fetch标准:对于
Access-Control-Expose-Headers
、Access-Control-Allow-Methods
和Access-Control-Allow-Headers
响应标头,对于没有凭据的请求,值*
计为通配符。对于此类请求,无法单独匹配标头名称或方法*
。因此,代替
您应该完全避免通配符,并显式指定允许的源和允许的请求头,如下所示:
ejk8hzay2#
在我的例子中,我需要使用axios在请求头中传递
content-type: application/x-www-form-urlencoded
。9jyewag03#
在我的示例中,我按照official docs(如下所示)在nestjs上启用CORS
但我仍然得到了CORS错误,因为一个CORS插件,我很久以前安装。
所以我关闭了浏览器中的“允许CORS”插件,错误就消失了。(如果你有任何类似的插件,请关闭它,看看它是否为你工作。)