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 lorsqu'il envoie, il 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 recherché l'erreur sur Google 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"
}

Ensuite, je reçois 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 fait une recherche sur Google et la seule question similaire que j'ai pu trouver a été une demi-réponse, puis fermée comme hors sujet. Quels en-têtes dois-je ajouter / supprimer?

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

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

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

Pour les demandes inter-domaines, le réglage du type de contenu à autre chose que application/x-www-form-urlencoded, multipart/form-dataou text/plaindéclenchera le navigateur pour envoyer une demande OPTIONS prévol au serveur.

Donc, bien que le serveur autorise la demande d'origine croisée mais ne le permet pas Access-Control-Allow-Headers, il générera des erreurs. Par défaut, le type de contenu angulaire est application/json, qui essaie d'envoyer une demande OPTION. Essayez d'écraser l'en-tête par défaut angulaire ou autorisez Access-Control-Allow-Headersà l'extrémité du serveur. Voici un échantillon angulaire:

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

Si cela aide quelqu'un (même si c'est un peu pauvre car nous ne devons le permettre qu'à des fins de développement), voici une solution Java car j'ai rencontré le même problème. [Modifier] N'utilisez pas le caractère générique * car c'est une mauvaise solution, utilisez localhostsi 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() {}

}

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

Voici une liste d'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 serveur http doit configurer pour le serveur Web auquel vous envoyez vos demandes.

Vous pouvez également demander à votre serveur de dévoiler l'en-tête "Content-Length".

Il reconnaîtra cela comme une demande CORS (Cross-Origin Resource Sharing) et devrait comprendre les implications de la configuration de ces serveurs.

Pour plus de détails, voir:

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

Vous pouvez activer l'en-tête approprié en 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");

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

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

Ils n'ont pas leur place sur le client. Il serait inutile d'avoir un moyen d'accorder des autorisations si elles pouvaient être accordées par le site qui en demandait l' autorisation plutôt que par le site propriétaire des données.

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

si vous testez des requêtes javascript pour ionic2 ou angularjs 2, dans votre chrome sur PC ou Mac, assurez-vous d'installer le plug-in CORS pour le navigateur Chrome pour autoriser l'origine croisée.

mayba get requests fonctionnera sans avoir besoin de cela, mais post and put et delete vous aurez besoin d'installer le plugin cors pour que les tests se passent sans problème, ce n'est certainement pas cool, mais je ne sais pas comment les gens le font sans plugin CORS.

et assurez-vous également que la réponse json ne retourne pas 400 par un certain statut json

c'est un problème de backend. si vous utilisez l'api des voiles sur le backend, changez 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'
};

Dans Asp Net Core , pour le faire fonctionner rapidement pour le développement; dans Startup.cs, Configure methodajoutez

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

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

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

Si vous utilisez localhostPHP et définissez-le pour résoudre le problème:

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

De votre utilisation front-end:

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

et boum plus de problèmes localhost!