Champ d'en-tête de requête Access-Control-Allow-Headers n'est pas autorisé par Access-Control-Allow-Headers

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

Pour les requêtes inter-domaines, définir le type de contenu sur autre chose que application/x-www-form-urlencoded, multipart/form-data, ou {[3] } déclenchera le navigateur pour envoyer une demande d'OPTIONS de contrôle en amont au serveur.

Donc, bien que le serveur autorise la requête d'origine croisée mais n'autorise pas Access-Control-Allow-Headers, il lancera des erreurs. Par défaut, le type de contenu angulaire est application/json, qui tente d'envoyer une demande D'OPTION. Essayez d'écraser angulaire en-tête par défaut ou Autoriser Access-Control-Allow-Headers à la fin 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 ce genre de pauvre car nous devons seulement l'autoriser à des fins de développement, voici une solution Java car j'ai rencontré le même problème. [Edit] n'utilisez pas le Joker * car c'est une mauvaise solution, utilisez localhost si vous avez vraiment besoin d'avoir quelque chose qui 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 requête POST est envoyée) doit inclure l'en-têteContent-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 requêtes.

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

Il reconnaîtra cela comme une origine croisée Le partage de ressources (CORS) demande et devrait comprendre les implications de faire ces configurations de serveur.

Pour plus de détails voir:

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

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: réponse - têtes. Ils doivent être fournis, dans la réponse, par le serveur auquel vous faites la demande.

Ils n'ont pas de 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 voulait l'autorisation au lieu du site qui possédait les 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();
});

C'est un problème de backend. si vous utilisez l'api sails sur le backend, changez cors.js et ajoutez votre déposé 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'
};

Si vous testez des requêtes javascript pour ionic2 ou angularjs 2, dans votre chrome sur pc ou mac , assurez-vous d'installer le plugin cors pour le navigateur chrome pour autoriser l'origine croisée .

Les requêtes mayba get fonctionneront sans avoir besoin de cela, mais post et puts et delete auront besoin de vous pour installer le plugin cors pour tester sans problèmes, ce n'est 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 l'est pas renvoyer 400 par un statut json

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

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

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 response. Supprimez le champ Access-Control-Allow-Origin de l'en-tête de la requête.