web-dev-qa-db-fra.com

Le champ d'en-tête de demande Access-Control-Allow-Headers n'est pas autorisé par Access-Control-Allow-Headers

J'essaie d'envoyer des fichiers à mon serveur avec une demande de publication, mais son envoi provoque l'erreur:

Le champ d'en-tête de demande Content-Type n'est pas autorisé par Access-Control-Allow-Headers.

J'ai donc googlé l'erreur et ajouté les en-têtes:

$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"
}

Alors j'obtiens l'erreur:

Le champ d'en-tête de demande Access-Control-Allow-Origin n'est pas autorisé par Access-Control-Allow-Headers

J'ai donc cherché sur Google et la seule question similaire que j'ai pu trouver était une demi-réponse, puis fermée en dehors du sujet. Quels en-têtes dois-je ajouter/supprimer?

javascriptangularjspostheadercors
203
user3194367

Le serveur (auquel la demande POST est envoyée) doit inclure l'en-tête Access-Control-Allow-Headers (etc) dans sa réponse. Les mettre dans votre demande du client n'a aucun effet.

En effet, il incombe au serveur de spécifier qu'il accepte les requêtes d'origine croisée (et qu'il autorise l'en-tête de requête Content-Type, etc.) - le client ne peut pas décider lui-même qu'un serveur donné doit autoriser CORS. .

169
Shai

J'ai eu le même problème. Dans la documentation de jQuery j'ai trouvé:

Pour les demandes interdomaines, définir le type de contenu sur autre chose que application/x-www-form-urlencoded, multipart/form-data ou text/plain déclenchera l'envoi par le navigateur d'une demande de contrôle en amont OPTIONS au serveur.

Donc, bien que le serveur autorise les requêtes croisées sur l'origine mais n'autorise pas Access-Control-Allow-Headers, il générera des erreurs. Par défaut, angular type de contenu est application/json, qui tente d'envoyer une demande OPTION. Essayez de remplacer _ en-tête par défaut angular ou autoriser Access-Control-Allow-Headers à la fin du serveur. Voici un exemple angular:

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

Si cela aide quelqu'un (même si c'est un peu pauvre, car nous ne devons le permettre que dans un but de dev), voici une solution Java car j'ai rencontré le même problème. [Éditer] N'utilisez pas le caractère générique * car c'est une mauvaise solution. Utilisez localhost si vous avez vraiment besoin que quelque chose fonctionne localement.

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

}
46
lekant

Le serveur (auquel la demande POST est envoyée) doit inclure l'en-tête Content-Type dans sa réponse.

Voici une liste des en-têtes typiques à inclure, y compris un en-tête "X_ACCESS_TOKEN" personnalisé:

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

C'est ce que votre gars du serveur HTTP doit configurer pour le serveur Web auquel vous envoyez vos demandes.

Vous pouvez également demander à votre serveur d’exposer l’en-tête "Content-Length".

Il reconnaîtra cela comme une demande de partage de ressources d'origine croisée (CORS) et devrait comprendre les implications de la configuration de ces serveurs.

Pour plus de détails, voir:

13
l3x

Ce qui suit fonctionne pour moi avec 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();
});
8
Fernando Gabrieli

Vous pouvez activer l'en-tête approprié dans PHP avec ceci:

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");
7
Vinod Dhakad

Les en-têtes que vous essayez de définir sont les réponse en-têtes. Ils doivent être fournis, dans la réponse, par le serveur auquel vous faites la demande.

Ils n'ont pas de place pour le client. Il serait inutile de disposer d'un moyen d'accorder des autorisations si elles pouvaient être accordées par le site qui souhaitait obtenir une autorisation à la place du site qui possédait les données.

4
Quentin

si vous testez des requêtes javascript pour ionic2 ou angularjs 2 dans votre chrome sur PC ou Mac, assurez-vous d’avoir installé le plug-in CORS pour le navigateur chrome afin de permettre le croisement de Origin.

mayba get requêtes fonctionnera sans que cela soit nécessaire, mais publier, supprimer et supprimer auront besoin de l’installation du plug-in cors pour que les tests se déroulent sans problèmes, ce n’est vraiment pas cool, mais je ne sais pas comment les gens le font sans le plugin CORS.

et aussi être sûr que la réponse JSON ne retourne pas 400 par un certain statut JSON

3
albaiti

Si quelqu'un rencontre ce problème avec un serveur express, ajoutez le middleware suivant

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

c'est un problème de base. si utilisez voiles api sur le backend change cors.js et ajoutez votre fichier ici

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'
};
3
Sedat Y

Dans mon cas, je reçois plusieurs paramètres en tant que @HeaderParam dans une méthode de service Web.

Ces paramètres DOIVENT être déclarés dans votre filtre CORS de cette façon:

@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");   
    }
}
2
russellhoff

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers erreur signifie que le champ Access-Control-Allow-Origin de l'en-tête HTTP n'est pas géré ou autorisé par la réponse. Supprimez le champ Access-Control-Allow-Origin de l'en-tête de la demande.

2
Tony Stark