Campo di intestazione richiesta Access-Control-Allow-Headers non è consentito da solo nella risposta di preflight

Ho incontrato più volte problemi CORS e in genere posso risolverlo, ma voglio davvero capirlo vedendo questo da un paradigma stack MEAN.

Prima ho semplicemente aggiunto il middleware nel mio express server per catturare queste cose, ma sembra che ci sia una specie di pre-hook che sta errando le mie richieste.

Campo di intestazione della richiesta Access-Control-Allow-Headers non consentito da Access-Control-Allow-Headers nella risposta di preflight

Ho pensato che potessi fare questo:

app.use(function(req, res, next) { res.header("Access-Control-Allow-Headers","*") }) 

o l’equivalente ma questo non sembra risolverlo. Naturalmente ho anche provato

     app.use(function(req, res, next) { res.header("Access-Control-Allow-Headers","Access-Control-Allow-Headers") }) 

    Ancora senza fortuna.

    Quando inizi a giocare con le intestazioni delle richieste personalizzate otterrai un preflight CORS. Questa è una richiesta che utilizza il verbo HTTP OPTIONS e include diverse intestazioni, una delle quali è Access-Control-Request-Headers elenca le intestazioni che il client desidera includere nella richiesta.

    È necessario rispondere a tale preflight CORS con le intestazioni CORS appropriate per farlo funzionare. Uno dei quali è infatti Access-Control-Allow-Headers . Tale intestazione deve contenere gli stessi valori contenuti nell’intestazione Access-Control-Request-Headers (o più).

    https://fetch.spec.whatwg.org/#http-cors-protocol spiega questa impostazione in modo più dettagliato.

    Questo è ciò che devi aggiungere per farlo funzionare.

      response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Credentials", "true"); response.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT"); response.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"); 

    Il browser invia una richiesta di verifica preliminare (con metodo tipo OPZIONI) per verificare se è ansible accedere al servizio ospitato sul server dal browser su un dominio diverso. In risposta alla richiesta di preflight, se si iniettano sopra le intestazioni il browser capisce che è ok effettuare ulteriori chiamate e otterrò una risposta valida alla mia effettiva chiamata GET / POST. puoi limitare il dominio a cui viene concesso l’accesso utilizzando Access-Control-Allow-Origin “,” localhost, xvz.com “anziché *. (* garantisce l’accesso a tutti i domini)

    Questo problema risolto

      "Origin, X-Requested-With, Content-Type, Accept, Authorization" 

    Particolare nel mio progetto (express.js / nodejs)

     app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization"); next(); }); 

    Aggiornare:

    Ogni volta che errore: Access-Control-Allow-Headers is not allowed by itself in preflight response nell’errore di Access-Control-Allow-Headers is not allowed by itself in preflight response puoi vedere che cosa non funziona con lo strumento di sviluppo di Chrome :
    inserisci la descrizione dell'immagine qui

    sopra l’errore manca Content-Type quindi aggiungi string Content-Type in Access-Control-Allow-Headers

    La risposta accettata è ok, ma ho avuto difficoltà a capirlo. Quindi ecco un semplice esempio per chiarirlo.

    Nella mia richiesta Ajax ho avuto un’intestazione di authorization standard.

      $$(document).on('ajaxStart', function(e){ var auth_token = localStorage.getItem(SB_TOKEN_MOBILE); if( auth_token ) { var xhr = e.detail.xhr; xhr.setRequestHeader('**Authorization**', 'Bearer ' + auth_token); } 

    Questo codice produce l’errore nella domanda. Quello che dovevo fare nel mio server nodejs era aggiungere Autorizzazione nelle intestazioni consentite:

     res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,**Authorization**'); 

    Mi sono imbattuto in questo problema da solo, nel contesto di ASP.NET assicurati che il tuo Web.config assomigli a questo:

                       

    Notare il valore di authorization per la chiave Access-Control-Allow-Headers . Mi mancava il valore di authorization, questa configurazione risolve il mio problema.

    Molto bene l’ho usato su un progetto Silex

     $app->after(function (Request $request, Response $response) { $response->headers->set('Access-Control-Allow-Origin', '*'); $response->headers->set("Access-Control-Allow-Credentials", "true"); $response->headers->set("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT"); $response->headers->set("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization"); }); 

    Per aggiungere alle altre risposte. Ho avuto lo stesso problema e questo è il codice che ho usato nel mio express server per consentire le chiamate REST:

      app.all('*', function(req, res, next) { res.header('Access-Control-Allow-Origin', 'URLs to trust of allow'); res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); res.header('Access-Control-Allow-Headers', 'Content-Type'); if ('OPTIONS' == req.method) { res.sendStatus(200); } else { next(); } }); 

    Ciò che questo codice fa fondamentalmente è intercettare tutte le richieste e aggiunge le intestazioni CORS, quindi continuare con le mie rotte normali. Quando c’è una richiesta OPTIONS risponde solo con le intestazioni CORS.

    EDIT: stavo usando questa correzione per due server distinti nodejs express sulla stessa macchina. Alla fine ho risolto il problema con un semplice server proxy.

    In Chrome:

    Il campo di intestazione richiesta X-Requested-With non è consentito da Access-Control-Allow-Headers nella risposta preflight.

    Per me, questo errore è stato triggersto da uno spazio finale nell’URL di questa chiamata.

     jQuery.getJSON( url, function( response, status, xhr ) { ... } 

    res.setHeader (‘Access-Control-Allow-Headers’, ‘*’);

    Solo per aggiungere che puoi mettere quelle intestazioni anche al file di configurazione di Webpack. Avevo bisogno di loro come nel mio caso mentre stavo eseguendo server webpack dev.

     devServer: { headers: { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Credentials": "true", "Access-Control-Allow-Methods": "GET,HEAD,OPTIONS,POST,PUT", "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept, Authorization" }, 

    questo problema si verifica quando creiamo un’intestazione personalizzata per la richiesta. Questa richiesta utilizza le HTTP OPTIONS e include diverse intestazioni.

    L’intestazione richiesta per questa richiesta è Access-Control-Request-Headers , che dovrebbe far parte dell’intestazione della risposta e dovrebbe consentire la richiesta da tutta l’origine. A volte ha bisogno di Content-Type anche nell’header di risposta. Quindi il tuo header di risposta dovrebbe essere così –

      response.header("Access-Control-Allow-Origin", "*"); // allow request from all origin response.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT"); response.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin, X-Requested-With, Content-Type, Accept, Authorization"); 

    Quello stesso problema che stavo affrontando.

    Ho fatto un semplice cambiamento.

      .config(function($httpProvider){ delete $httpProvider.defaults.headers.common['X-Requested-With']; });