CORS: impossibile utilizzare il carattere jolly in Access-Control-Allow-Origin quando il flag delle credenziali è true

Ho una configurazione che coinvolge

Server frontend (Node.js, dominio: localhost: 3000) <---> Backend (Django, Ajax, dominio: localhost: 8000)

Browser <- webapp <- Node.js (serve l'app)

Browser (webapp) -> Ajax -> Django (Servire richieste POST ajax)

Ora, il mio problema qui è con l'installazione CORS che la webapp utilizza per effettuare chiamate Ajax al server back-end. In cromo, continuo a ricevere

Impossibile utilizzare il carattere jolly in Access-Control-Allow-Origin quando il flag credenziali è true.

non funziona neanche su Firefox.

La mia configurazione di Node.js è:

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();
};

E in Django sto usando questo middleware insieme a questo

La webapp invia richieste in quanto tali:

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

Quindi, le intestazioni della richiesta che la webapp invia sembrano:

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="***"

Ed ecco l'intestazione della risposta:

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

Dove sto sbagliando ?!

Modifica 1: Sto usando chrome --disable-web-security, ma ora voglio che le cose funzionino davvero.

Modifica 2: Risposta:

Quindi, soluzione per me 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/
)

Questa è una parte della sicurezza, non puoi farlo. Se si desidera consentire le credenziali, Access-Control-Allow-Originnon è necessario utilizzare *. Dovrai specificare il protocollo esatto + dominio + porta. Per riferimento vedi queste domande:

1. Sottodomini, porte e protocolli jolly Access-Control-Allow-Origin
2. Condivisione delle risorse di origine incrociata con credenziali

Inoltre *è troppo permissivo e vanificherebbe l'uso delle credenziali. Quindi impostare http://localhost:3000o http://localhost:8000come intestazione di origine consentita.

Se si utilizza il middleware CORS e si desidera inviare il valore withCredentialbooleano true, è possibile configurare CORS in questo modo:

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

Se stai usando expresspuoi usare il pacchetto cors per consentire CORS in questo modo invece di scrivere il tuo middleware;

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

app.use(cors());

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

Provalo:

const cors = require('cors')

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

}
app.use(cors(corsOptions));

Se vuoi consentire tutte le origini e mantenere vere le credenziali, questo ha funzionato per me:

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

(Modifica) Il componente aggiuntivo precedentemente raccomandato non è più disponibile, è possibile provare questo altro

Ai fini dello sviluppo in Chrome, l'installazione di questo componente aggiuntivo eliminerà l'errore specifico:

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.

Dopo l'installazione, assicurati di aggiungere il tuo pattern url al Intercepted URLsfacendo clic sull'icona di AddOn ( CORS , verde o rosso) e riempiendo la casella di testo appropriata. Un esempio di pattern URL da aggiungere qui che funzionerà http://localhost:8080sarebbe:*://*

Questo funziona per me in fase di sviluppo, ma non posso consigliarlo in produzione, è solo un modo diverso di fare il lavoro che non è stato ancora menzionato ma probabilmente non è il migliore. Comunque qui va:

È possibile ottenere l'origine dalla richiesta, quindi utilizzarla nell'intestazione della risposta. Ecco come appare in express:

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

Non so come sarebbe con la configurazione di Python, ma dovrebbe essere facile da tradurre.