web-dev-qa-db-ja.com

NestJSが本番環境でのcorsを有効にします

公式チュートリアル に従ってNestJSアプリでCORSを有効にしたため、main.tsは次のようになります。

import { FastifyAdapter, NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule, new FastifyAdapter(), { cors: true });
  await app.listen(3000);
}
bootstrap();

npm run start:devを使用してアプリケーションを実行すると機能します。

ただし、最初にnpm run webpackを使用してアプリケーションをコンパイルし、次にnode server.jsを使用してアプリケーションを実行しようとすると、CORは機能しません。

クライアントからのhttpリクエストは次のように失敗します：

プリフライトリクエストへの応答がアクセスコントロールチェックに合格しません。リクエストされたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン ' http：// localhost：80 'はアクセスを許可されません。応答のHTTPステータスコードは404です。

javascriptnode.jstypescriptcorsnestjs
7
Francesco Borzi

どういうわけか、問題はnpm run webpackを使用してコンパイルしていました。 prestart:prodを使用してコンパイルすると、動作します。

コメントで提案してくれた@ georgii-rychkoに感謝します。

1
Francesco Borzi

ここで説明されているアプローチを使用してみてください https://docs.nestjs.com/techniques/security#cors

const app = await NestFactory.create(ApplicationModule);
app.enableCors();
await app.listen(3000);
14
Georgii Rychko

あなたも試したことを知って悲しい：

const app = await NestFactory.create(ApplicationModule);
app.enableCors();
await app.listen(3000);

そして、まだ機能していません。

サーバー側で cors が有効になっていることを確認します。これは次のようになります。

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Accept');
  next();
});

また、ブラウザが cors をサポートしていることも確認してください。それでもうまくいかない場合は、Chrome用の Allow-Control-Allow-Origin 拡張機能をダウンロードしてください。問題が解決するはずです。

4
antzshrek

GraphqlでNestJsを実行している場合、ApolloサーバーがCORS設定を上書きするという問題が発生します リンクを参照 。これにより問題が修正されました。私はこれに8時間の時間をかけました。 : うまくいけば、あなたがする必要はありません。---（link と link を参照してください。

        GraphQLModule.forRoot({
            debug: process.env.NODE_ENV !== 'production',
            playground: process.env.NODE_ENV !== 'production',
            typePaths: ['./**/*.graphql'],
            installSubscriptionHandlers: true,
            context: ({req}) => {
                return {req};
            },
            cors: {
                credentials: true,
                Origin: true,
            },
        }),

あなたのmain.tsで：

        app.enableCors({
            Origin: true,
            methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
            credentials: true,
        });
0
David Dehghan