Campo 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 lo invia provoca l'errore:

Il campo di intestazione della richiesta Content-Type non è consentito da 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:

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

Quindi ho cercato su Google e l'unica domanda simile che ho potuto trovare è stata fornita una mezza risposta poi chiusa come fuori tema. Quali intestazioni dovrei aggiungere / rimuovere?

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

Questo perché spetta al server specificare che accetta le richieste di origine incrociata (e che consente l' Content-Typeintestazione della richiesta 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 richieste tra domini, l'impostazione del tipo di contenuto a qualcosa di diverso application/x-www-form-urlencoded, multipart/form-datao text/plainattiverà il browser per inviare un OPZIONI verifica preliminare richiesta al server.

Pertanto, sebbene il server consenta la richiesta di origine incrociata ma non lo consente Access-Control-Allow-Headers, genererà errori. Per impostazione predefinita, il tipo di contenuto angolare è application/json, che sta tentando di inviare una richiesta OPTION. Prova a sovrascrivere l'intestazione predefinita angolare o consentire Access-Control-Allow-Headersalla fine del server. Ecco un campione angolare:

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

Se questo aiuta qualcuno, (anche se questo è un po 'scarso perché dobbiamo permetterlo solo a scopo di sviluppo) ecco una soluzione Java poiché ho riscontrato lo stesso problema. [Modifica] Non utilizzare il carattere jolly * in quanto è una cattiva soluzione, utilizzare localhostse è davvero necessario che qualcosa 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, inclusa un'intestazione "X_ACCESS_TOKEN" personalizzata:

"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 ragazzo del server http deve configurare per il server web a cui stai inviando le tue richieste.

Puoi anche chiedere al tuo server di esporre l'intestazione "Content-Length".

Riconoscerà questo come una richiesta di condivisione delle risorse tra le origini (CORS) e dovrebbe comprendere le implicazioni della configurazione di tali server.

Per i dettagli vedere:

• http://www.w3.org/TR/cors/
• http://enable-cors.org/

Puoi attivare 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");

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 intestazioni di risposta . Devono essere forniti, nella risposta, dal server al quale stai effettuando la richiesta.

Non hanno posto sul client. Sarebbe inutile avere un mezzo per concedere le autorizzazioni se potessero essere concesse dal sito che voleva l' autorizzazione invece del sito che possedeva i dati.

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

se stai testando alcune richieste javascript per ionic2 o angularjs 2, in Chrome su PC o Mac, assicurati di installare il plug-in CORS per il browser Chrome per consentire il cross-source.

mayba ottenere richieste funzionerà senza che ciò sia necessario, ma pubblicare e inserire ed eliminare richiederà l'installazione del plug-in cors per l'esecuzione senza problemi di test, che sicuramente non è interessante, ma non so come la gente lo faccia senza plug-in CORS.

e assicurati anche che la risposta JSON non stia restituendo 400 con un certo stato JSON

questo è un problema di backend. se usi le vele API sul backend cambia cors.js e aggiungi il tuo archivio 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'
};

In Asp Net Core , per farlo rapidamente funzionare per lo sviluppo; in Startup.cs, Configure methodaggiungi

app.UseCors(options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());

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<String, Object> 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-Headerserrore significa che il Access-Control-Allow-Origincampo dell'intestazione HTTP non è gestito o consentito dalla risposta. Rimuovi Access-Control-Allow-Origincampo dall'intestazione della richiesta.

Se stai usando localhoste PHP impostato su questo per risolvere il problema:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Content-Type'); 

Dal tuo utilizzo front-end:

{headers: {"Content-Type": "application/json"}}

e boom non più problemi da localhost!