Campo di intestazione richiesta Access-Control-Allow-Headers non consentito da Access-Control-Allow-Headers

Sto cercando di inviare file al mio server con una richiesta di post, ma quando viene inviato provoca l’errore:

Request header field Content-Type is not allowed by Access-Control-Allow-Headers. 

Quindi ho cercato su Google l’errore e ho aggiunto le intestazioni:

 $http.post($rootScope.URL, {params: arguments}, {headers: { "Access-Control-Allow-Origin" : "*", "Access-Control-Allow-Methods" : "GET,POST,PUT,DELETE,OPTIONS", "Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With" } 

Quindi ottengo l’errore:

 Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers 

Così ho cercato su Google e l’unica domanda simile che ho trovato è stata fornita da una mezza risposta e poi chiusa come fuori tema. Quali intestazioni dovrei aggiungere / rimuovere?

Il server (a cui viene inviata la richiesta POST) deve includere l’intestazione Access-Control-Allow-Headers (ecc.) Nella sua risposta . Inserirli nella richiesta dal cliente non ha alcun effetto.

Ciò è dovuto al fatto che spetta al server specificare che accetta le richieste di origine incrociata (e che consente l’intestazione della richiesta Content-Type e così via) – il client non può decidere da solo che un determinato server dovrebbe consentire CORS.

Ho avuto lo stesso problema. Nella documentazione di jQuery ho trovato:

Per le richieste tra domini, l’impostazione del tipo di contenuto su qualsiasi cosa diversa da application/x-www-form-urlencoded , multipart/form-data o text/plain attiverà il browser per inviare una richiesta OPZIONI di preflight al server.

Quindi, benché il server consenta la richiesta dell’origine incrociata ma non consenta Access-Control-Allow-Headers , genererà errori. Per impostazione predefinita, il tipo di contenuto angular è application/json , che sta tentando di inviare una richiesta OPTION. Prova a sovrascrivere l’intestazione predefinita angular o consenti Access-Control-Allow-Headers nel server. Ecco un esempio angular:

 $http.post(url, data, { headers : { 'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8' } }); 

Se questo aiuta qualcuno, anche questo tipo di povero come dobbiamo permettere questo per scopo dev, ecco una soluzione Java come ho riscontrato lo stesso problema. [Modifica] Non utilizzare la wild card * in quanto è una soluzione sbagliata, usa localhost se hai davvero bisogno di qualcosa che funzioni localmente.

 public class SimpleCORSFilter implements Filter { public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) res; response.setHeader("Access-Control-Allow-Origin", "my-authorized-proxy-or-domain"); response.setHeader("Access-Control-Allow-Methods", "POST, GET"); response.setHeader("Access-Control-Max-Age", "3600"); response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"); chain.doFilter(req, res); } public void init(FilterConfig filterConfig) {} public void destroy() {} } 

Il server (a cui viene inviata la richiesta POST) deve includere l’intestazione Content-Type nella sua risposta.

Ecco un elenco di intestazioni tipiche da includere, tra cui un’intestazione personalizzata “X_ACCESS_TOKEN”:

 "X-ACCESS_TOKEN", "Access-Control-Allow-Origin", "Authorization", "Origin", "x-requested-with", "Content-Type", "Content-Range", "Content-Disposition", "Content-Description" 

Questo è ciò che il tuo server http deve configurare per il server web a cui invii le tue richieste.

Potresti anche chiedere al tuo server di esporre l’intestazione “Content-Length”.

Riconoscerà questa richiesta come richiesta CORS (Cross-Origin Resource Sharing) e dovrebbe comprendere le implicazioni di tali configurazioni server.

Per dettagli vedi:

Quanto segue funziona per me con nodejs:

 xServer.use(function(req, res, next) { res.setHeader("Access-Control-Allow-Origin", 'http://localhost:8080'); res.setHeader('Access-Control-Allow-Methods', 'POST,GET,OPTIONS,PUT,DELETE'); res.setHeader('Access-Control-Allow-Headers', 'Content-Type,Accept'); next(); }); 

Le intestazioni che stai cercando di impostare sono le intestazioni di risposta . Devono essere forniti, nella risposta, dal server a cui stai facendo la richiesta.

Non hanno alcun posto sul client. Sarebbe inutile disporre di un mezzo per concedere le autorizzazioni se potevano essere concesse dal sito che voleva il permesso invece del sito che possedeva i dati.

Se qualcuno ha riscontrato questo problema con un server Express, aggiungi il seguente middleware

 app.use(function(req, res, next) { res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); }); 

questo è un problema di backend. se usi vele api sul backend cambia cors.js e aggiungi il tuo file qui

 module.exports.cors = { allRoutes: true, origin: '*', credentials: true, methods: 'GET, POST, PUT, DELETE, OPTIONS, HEAD', headers: 'Origin, X-Requested-With, Content-Type, Accept, Engaged-Auth-Token' }; 

se stai testando alcune richieste javascript per ionic2 o angularjs 2, nel tuo chrome su pc o mac, assicurati di installare il plugin CORS per il browser chrome per consentire l’origine incrociata.

mayba ricevere le richieste funzionerà senza che sia necessario, ma postare e mettere ed eliminare avrà bisogno di installare il plugin cors per testare senza problemi, che sicuramente non è bello, ma non so come le persone lo fanno senza plugin CORS.

e assicurati anche che la risposta JSON non restituisca 400 da qualche stato JSON

Nel mio caso, sto ricevendo diversi parametri come @HeaderParam in un metodo di servizio web.

Questi parametri DEVONO essere dichiarati nel tuo filtro CORS in questo modo:

 @Provider public class CORSFilter implements ContainerResponseFilter { @Override public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext) throws IOException { MultivaluedMap headers = responseContext.getHeaders(); headers.add("Access-Control-Allow-Origin", "*"); ... headers.add("Access-Control-Allow-Headers", /* * name of the @HeaderParam("name") must be declared here (raw String): */ "name", ...); headers.add("Access-Control-Allow-Credentials", "true"); headers.add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD"); } } 

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers errore significa che il campo Access-Control-Allow-Origin dell’intestazione HTTP non è gestito o consentito dalla risposta. Rimuovi il campo Access-Control-Allow-Origin dall’intestazione della richiesta.

Puoi triggersre l’intestazione corretta in PHP con questo:

 header('Access-Control-Allow-Origin: *'); header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE"); header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, X-Requested-With");