0
votes

Activer Cors dans NestJs

Je souhaite utiliser une API NestJs, mais j'obtiens le même message d'erreur à chaque fetch :

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

Mon frontend est un Angular, où j'ai une simple fetch :

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors();
  await app.listen(3000);
}
bootstrap();

J'ai essayé ces options dans mes NestJ, mais aucune d'elles ne semble fonctionner:

Tentative A

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors({
    origin: true,
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
    allowedHeaders: 'Content-Type, Accept',
  });
  await app.listen(3000);
}
bootstrap();

Tentative B

fetch('http://localhost:3000/articles')
    .then((res) => {
      console.log(res);
    });

Tentative C

Access to fetch at 'http://localhost:3000/articles' from origin 'http://localhost:4200' 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.

cors nestjs

4 commentaires

nestjs utilise le module cors d'expressjs / cors github.com/expressjs/cors . La propriété origin: true est utilisée par route pour activer les cors pour cette route spécifique. Comme il s'agit d'un changement général, je pense que j'essaierais de changer cela en origin: '*' pour voir si cela fonctionne. En fin de compte, il devrait s'agir du domaine à partir duquel la demande est lancée

@VladNeacsu même était '*' ou 'localhost' ou 'localhost:4200'

Il doit y avoir un problème non lié car le deuxième exemple de votre code avec app.enableCors(); semble bien fonctionner. Avez-vous essayé de redémarrer l'application après la modification? De plus, le port n'a pas d'importance et à partir de l'erreur, vous ne faites pas de demande interdomaine

Quel est le code d'état HTTP de la réponse? Vous pouvez utiliser le volet Réseau dans les outils de développement du navigateur pour vérifier. Est-ce une erreur 4xx ou 5xx plutôt qu'une réponse de succès 200 OK?

3 Réponses :

2
votes

Sur votre main.ts , modifiez la fonction d'amorçage comme suit pour activer CORS

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

const app = await NestFactory.create(AppModule, { cors: true });

Cette méthode vous aide à passer des paramètres supplémentaires pour les cors

En savoir plus sur CORS ici

0 commentaires

0
votes

Vous pouvez utiliser le module cors npm. Installez cors en exécutant la commande
npm install cors --save

Après l'installation, dans votre fichier main.ts collez la ligne ci-dessous.

app.use(cors());

0 commentaires

0
votes

Une alternative aux en-têtes CORS est de mettre en place un serveur Web tel que Nginix sur votre ordinateur et de transmettre par proxy toutes vos demandes, en les transférant vers le port approprié en fonction d'une racine d'URL. C'est ainsi que les choses sont normalement abordées dans le monde réel car les en-têtes CORS sont relativement nouveaux et peuvent ouvrir des failles de sécurité que vous ne voudrez peut-être pas par défaut.

Cela résout le problème fondamental qui est que votre application s'exécute sur une autre origine (protocole + domaine + port) que l'API à laquelle vous souhaitez accéder.

0 commentaires