web-dev-qa-db-fra.com

Node.js: POST - Méthode de requête: OPTIONS Code statut: 403 Interdit

Nous avons la configuration suivante:

Front end code : REACT (Hosted using express js) (lets call this www.domainA.com)
Backend        : .NET WEB API (Hosted in IIS 7.5) (lets call this www.domainB.com)

Le domaine de l'application FE fait la demande aux données GET et POST aux données de l'API Web.

GET fonctionne parfaitement, mais chaque fois que j'essaie de POST - données à l'API Web, l'erreur suivante est générée:

Request URL: http://www.domainB.com/api/postdataoperation
Request Method: OPTIONS
Status Code: 403 Forbidden

J'ai consulté de nombreux articles sur CORS et je suis allé de l'avant pour configurer HTTPResponseHeaders dans IIS comme suit:

Access-Control-Allow-Methods : POST,GET,OPTIONS,PUT,DELETE
Access-Control-Allow-Origin  : http://www.domainA.com

Le post-demande de react solution est comme suit:

axios.post(`http://www.domainB.com/api/postdataoperation`, {userId});
8
Murtaza Mandvi

Le problème est que votre serveur n'est pas configuré pour répondre aux demandes OPTIONS avec le statut de réponse correct, le statut de réussite 2xx.

L’EEG fonctionne parce qu’il ne fait pas de demande de contrôle en amont car il répond aux critères pour être une demande simple telle que définie par la documentation CORS

D'autre part, la demande POST remplit les critères pour être une demande de contrôle en amont }, ce qui signifie qu'une requête OPTIONS de contrôle en amont doit être effectuée en premier.

En bref, vous avez correctement configuré les en-têtes de réponse CORS, mais le serveur n’est pas configuré pour répondre avec une réponse 2xx pour les demandes de méthode OPTIONS (généralement 200 statuts). 

Le serveur doit répondre aux demandes OPTIONS avec un statut de réussite 2xx, généralement 200 ou 204.

Si le serveur ne le fait pas, les en-têtes Access-Control- * que vous avez configuré pour l’envoyer ne font aucune différence. Et la réponse à la configuration du serveur pour traiter les requêtes OPTIONS correctement - envoyer un message de réussite 200 ou 204 - dépend du logiciel serveur utilisé.

En empruntant la solution à cette réponse , faites ceci sur votre backend, API Web .NET:

Dans votre BaseApiController.cs:

Nous faisons cela pour permettre au verbe OPTIONS http

public class BaseApiController : ApiController
  {
    public HttpResponseMessage Options()
    {
      return new HttpResponseMessage { StatusCode = HttpStatusCode.OK };
    }
}

Références

_ { Requêtes surveillées } _

_ { réponse pour le contrôle en amont 403 interdite }

Remarque

L'exécution d'un serveur nodejs sur domainA.com n'est pas pertinente. La bibliothèque "axios" peut être utilisée pour a) créer XMLHttpRequests à partir du navigateur ou b) envoyer des requêtes http à partir de node.js. Dans ce cas, c’est la première option, le "axios.post" pour domainB est effectué via un XMLHttpRequest depuis le navigateur, c’est pourquoi vous obtenez une requête preflighted sur domainB.com.

4
Jannes Botis

La réponse de Jannes Botis explique bien le mécanisme de contrôle en amont. J'ajoute simplement le code que j'utilise pour résoudre ce problème sur Node.js/Express

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://www.domainA.com');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, DELETE, OPTIONS');
  res.setHeader(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept, Authorization'
  );
  next();
});

// All OPTIONS requests return a simple status: 'OK'
app.options('*', (req, res) => {
  res.json({
    status: 'OK'
  });
});

app.get('/', ...);

app.post('/api/postdataoperation', ...);
0
codeKonami

quelle est la sortie de l'API Web .NET lorsque la demande POST échoue?

0
Mina