CORS: impossible d'utiliser le caractère générique dans Access-Control-Allow-Origin lorsque l'indicateur d'informations d'identification est vrai

J'ai une configuration impliquant

Serveur frontal (Node.js, domaine: localhost: 3000) <---> Backend (Django, Ajax, domaine: localhost: 8000)

Navigateur <- webapp <- Node.js (servir l'application)

Navigateur (webapp) -> Ajax -> Django (Servir les requêtes POST ajax)

Maintenant, mon problème ici est avec la configuration CORS que la webapp utilise pour passer des appels Ajax au serveur principal. En chrome, je continue de

Impossible d'utiliser le caractère générique dans Access-Control-Allow-Origin lorsque l'indicateur d'informations d'identification est vrai.

ne fonctionne pas non plus sur Firefox.

Ma configuration Node.js est:

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', 'http://localhost:8000/');
    res.header('Access-Control-Allow-Credentials', true);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
};

Et dans Django j'utilise ce middleware avec cela

La webapp fait des demandes en tant que telles:

$.ajax({
    type: "POST",
    url: 'http://localhost:8000/blah',
    data: {},
    xhrFields: {
        withCredentials: true
    },
    crossDomain: true,
    dataType: 'json',
    success: successHandler
});

Ainsi, les en-têtes de demande envoyés par la webapp ressemblent à:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept"
Access-Control-Allow-Methods: 'GET,PUT,POST,DELETE'
Content-Type: application/json 
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Cookie: csrftoken=***; sessionid="***"

Et voici l'en-tête de réponse:

Access-Control-Allow-Headers: Content-Type,*
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST,GET,OPTIONS,PUT,DELETE
Content-Type: application/json

Où vais-je me tromper?!

Edit 1: J'ai utilisé chrome --disable-web-security, mais je veux maintenant que les choses fonctionnent réellement.

Edit 2: Réponse:

Donc, solution pour moi django-cors-headersconfig:

CORS_ORIGIN_ALLOW_ALL = False
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000' # Here was the problem indeed and it has to be http://localhost:3000, not http://localhost:3000/
)

Cela fait partie de la sécurité, vous ne pouvez pas le faire. Si vous souhaitez autoriser les informations d'identification, vous Access-Control-Allow-Originne devez pas les utiliser *. Vous devrez spécifier le protocole + domaine + port exact. Pour référence, voir ces questions:

1. Sous-domaines, ports et protocoles génériques Access-Control-Allow-Origin
2. Partage de ressources d'origine croisée avec informations d'identification

En outre, il *est trop permissif et irait à l'encontre de l'utilisation des informations d'identification. Définissez donc http://localhost:3000ou http://localhost:8000comme en-tête d'origine autorisé.

Si vous utilisez un middleware CORS et que vous souhaitez envoyer un withCredentialbooléen true, vous pouvez configurer CORS comme ceci:

var cors = require('cors');    
app.use(cors({credentials: true, origin: 'http://localhost:3000'}));

Si vous utilisez, expressvous pouvez utiliser le package cors pour autoriser CORS comme tel au lieu d'écrire votre middleware;

var express = require('express')
, cors = require('cors')
, app = express();

app.use(cors());

app.get(function(req,res){ 
  res.send('hello');
});

essayez-le:

const cors = require('cors')

const corsOptions = {
    origin: 'http://localhost:4200',
    credentials: true,

}
app.use(cors(corsOptions));

Si vous souhaitez autoriser toutes les origines et conserver les informations d'identification vraies, cela a fonctionné pour moi:

app.use(cors({
  origin: function(origin, callback){
    return callback(null, true);
  },
  optionsSuccessStatus: 200,
  credentials: true
}));

(Modifier) ​​Le module complémentaire précédemment recommandé n'est plus disponible, vous pouvez essayer cet autre

À des fins de développement dans Chrome, l'installation de ce module complémentaire supprimera cette erreur spécifique:

Access to XMLHttpRequest at 'http://192.168.1.42:8080/sockjs-node/info?t=1546163388687' 
from origin 'http://localhost:8080' has been blocked by CORS policy: The value of the 
'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' 
when the request's credentials mode is 'include'. The credentials mode of requests 
initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Après l'installation, assurez-vous d'ajouter votre modèle d'URL Intercepted URLsen cliquant sur l' icône AddOn ( CORS , vert ou rouge) et en remplissant la zone de texte appropriée. Un exemple de modèle d'URL à ajouter ici qui fonctionnera http://localhost:8080serait:*://*

Cela fonctionne pour moi en développement, mais je ne peux pas dire qu'en production, c'est juste une manière différente de faire le travail qui n'a pas encore été mentionnée mais probablement pas la meilleure. Quoi qu'il en soit, voici:

Vous pouvez obtenir l'origine de la demande, puis l'utiliser dans l'en-tête de réponse. Voici à quoi cela ressemble en express:

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', req.header('origin') );
  next();
});

Je ne sais pas à quoi cela ressemblerait avec votre configuration python mais cela devrait être facile à traduire.