AngularJS effectue une requête HTTP OPTIONS pour une ressource d'origine croisée

J'essaie de configurer AngularJS pour communiquer avec une ressource d'origine croisée où l'hôte d'actif qui fournit mes fichiers de modèle se trouve sur un domaine différent et, par conséquent, la demande XHR que Angular effectue doit être inter-domaine. J'ai ajouté l'en-tête CORS approprié à mon serveur pour la demande HTTP pour que cela fonctionne, mais cela ne semble pas fonctionner. Le problème est que lorsque j'inspecte les requêtes HTTP dans mon navigateur (chrome), la requête envoyée au fichier d'actif est une requête OPTIONS (il doit s'agir d'une requête GET).

Je ne sais pas s'il s'agit d'un bogue dans AngularJS ou si j'ai besoin de configurer quelque chose. D'après ce que je comprends, l'encapsuleur XHR ne peut pas faire de requête HTTP OPTIONS, il semble donc que le navigateur essaie de déterminer s'il est "autorisé" à télécharger l'actif en premier avant d'exécuter la demande GET. Si tel est le cas, dois-je également définir l'en-tête CORS (Access-Control-Allow-Origin: http://asset.host ... ) Avec l'hôte d'actif?

Les requêtes OPTIONS ne sont en aucun cas un bogue AngularJS, c'est ainsi que la norme Cross-Origin Resource Sharing oblige les navigateurs à se comporter. Veuillez vous référer à ce document: https://developer.mozilla.org/en-US/docs/HTTP_access_control , où dans la section "Présentation", il est dit:

La norme de partage de ressources entre origines fonctionne en ajoutant de nouveaux en-têtes HTTP qui permettent aux serveurs de décrire l'ensemble des origines autorisées à lire ces informations à l'aide d'un navigateur Web. En outre, pour les méthodes de requête HTTP qui peuvent provoquer des effets secondaires sur les données utilisateur (en particulier; pour les méthodes HTTP autres que GET, ou pour l'utilisation POST avec certains types MIME). La spécification oblige les navigateurs à "contrôler en amont" la demande, en sollicitant les méthodes prises en charge auprès du serveur avec un en-tête de demande HTTP OPTIONS, puis, sur "approbation" du serveur, en envoyant la demande réelle avec la méthode de demande HTTP réelle. Les serveurs peuvent également informer les clients si des "informations d'identification" (y compris les cookies et les données d'authentification HTTP) doivent être envoyées avec les demandes.

Il est très difficile de fournir une solution générique qui fonctionnerait pour tous les serveurs WWW car la configuration variera en fonction du serveur lui-même et des verbes HTTP que vous avez l'intention de prendre en charge. Je vous encourage à parcourir cet excellent article ( http://www.html5rocks.com/en/tutorials/cors/ ) qui contient beaucoup plus de détails sur les en-têtes exacts qui doivent être envoyés par un serveur.

Pour Angular 1.2.0rc1 +, vous devez ajouter une ressourceUrlWhitelist.

1.2: version de sortie, ils ont ajouté une fonction escapeForRegexp afin que vous n'ayez plus à échapper aux chaînes. Vous pouvez simplement ajouter l'URL directement

'http://sub*.assets.example.com/**' 

assurez-vous d'ajouter ** pour les sous-dossiers. Voici un jsbin fonctionnel pour 1.2: http://jsbin.com/olavok/145/edit

1.2.0rc: Si vous êtes toujours sur une version rc, le Angular 1.2.0rc1 ressemble à la solution:

.config(['$sceDelegateProvider', function($sceDelegateProvider) {
     $sceDelegateProvider.resourceUrlWhitelist(['self', /^https?:\/\/(cdn\.)?yourdomain.com/]);
 }])

Voici un exemple jsbin où cela fonctionne pour 1.2.0rc1: http://jsbin.com/olavok/144/edit

Pré 1.2: Pour les versions plus anciennes (ref http://better-inter.net/enabling-cors-in-angular-js/ ) vous devez ajouter les 2 lignes suivantes à votre configuration:

$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];

Voici un exemple jsbin où cela fonctionne pour les versions antérieures à 1.2: http://jsbin.com/olavok/11/edit

REMARQUE: je ne suis pas sûr que cela fonctionne avec la dernière version d'Angular.

ORIGINAL:

Il est également possible de remplacer la demande OPTIONS (n'a été testé que dans Chrome):

app.config(['$httpProvider', function ($httpProvider) {
  //Reset headers to avoid OPTIONS request (aka preflight)
  $httpProvider.defaults.headers.common = {};
  $httpProvider.defaults.headers.post = {};
  $httpProvider.defaults.headers.put = {};
  $httpProvider.defaults.headers.patch = {};
}]);

Votre service doit répondre à une OPTIONSdemande avec des en-têtes comme ceux-ci:

Access-Control-Allow-Origin: [the same origin from the request]
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: [the same ACCESS-CONTROL-REQUEST-HEADERS from request]

Voici un bon doc: http://www.html5rocks.com/en/tutorials/cors/#toc-adding-cors-support-to-the-server

Le même document dit

Contrairement aux demandes simples (décrites ci-dessus), les demandes "de contrôle en amont" envoient d'abord un en-tête de demande HTTP OPTIONS à la ressource de l'autre domaine, afin de déterminer si la demande réelle peut être envoyée en toute sécurité. Les demandes intersites sont contrôlées en amont comme ceci car elles peuvent avoir des implications sur les données des utilisateurs. En particulier, une demande est contrôlée en amont si:

Il utilise des méthodes autres que GET ou POST. En outre, si POST est utilisé pour envoyer des données de demande avec un type de contenu autre que application / x-www-form-urlencoded, multipart / form-data ou text / plain, par exemple si la demande POST envoie une charge utile XML au serveur en utilisant application / xml ou text / xml, la demande est alors contrôlée en amont.

Il définit des en-têtes personnalisés dans la demande (par exemple, la demande utilise un en-tête tel que X-PINGOTHER)

Lorsque la demande d'origine est Get sans en-têtes personnalisés, le navigateur ne doit pas faire de demande d'options comme il le fait maintenant. Le problème est qu'il génère un en-tête X-Requested-With qui force la requête Options. Voir https://github.com/angular/angular.js/pull/1454 sur la façon de supprimer cet en-tête

Cela a résolu mon problème:

$http.defaults.headers.post["Content-Type"] = "text/plain";

Si vous utilisez un serveur nodeJS, vous pouvez utiliser cette bibliothèque, cela a bien fonctionné pour moi https://github.com/expressjs/cors

var express = require('express')
  , cors = require('cors')
  , app = express();

app.use(cors());

et après vous pouvez faire un npm update.

Voici comment j'ai résolu ce problème sur ASP.NET

• Tout d'abord, vous devez ajouter le package de nuget Microsoft.AspNet.WebApi.Cors

• Modifiez ensuite le fichier App_Start \ WebApiConfig.cs

  public static class WebApiConfig    
  {
     public static void Register(HttpConfiguration config)
     {
        config.EnableCors();
  
        ...
     }    
  }

• Ajoutez cet attribut à votre classe de contrôleur

  [EnableCors(origins: "*", headers: "*", methods: "*")]
  public class MyController : ApiController
  {  
      [AcceptVerbs("POST")]
      public IHttpActionResult Post([FromBody]YourDataType data)
      {
           ...
           return Ok(result);
      }
  }

• J'ai pu envoyer json à l'action de cette façon

  $http({
          method: 'POST',
          data: JSON.stringify(data),
          url: 'actionurl',
          headers: {
              'Content-Type': 'application/json; charset=UTF-8'
          }
      }).then(...)

Référence: activation des requêtes d'origine croisée dans l'API Web ASP.NET 2

D'une certaine manière, je l'ai corrigé en changeant

<add name="Access-Control-Allow-Headers" 
     value="Origin, X-Requested-With, Content-Type, Accept, Authorization" 
     />

à

<add name="Access-Control-Allow-Headers" 
     value="Origin, Content-Type, Accept, Authorization" 
     />

Parfaitement décrit dans le commentaire de pkozlowski. J'avais une solution de travail avec AngularJS 1.2.6 et ASP.NET Web Api mais quand j'ai mis à niveau AngularJS vers 1.3.3, les demandes ont échoué.

• La solution pour le serveur Web Api consistait à ajouter la gestion des requêtes OPTIONS au début de la méthode de configuration (plus d'informations dans cet article de blog ):

  app.Use(async (context, next) =>
  {
      IOwinRequest req = context.Request;
      IOwinResponse res = context.Response;
      if (req.Path.StartsWithSegments(new PathString("/Token")))
      {
          var origin = req.Headers.Get("Origin");
          if (!string.IsNullOrEmpty(origin))
          {
              res.Headers.Set("Access-Control-Allow-Origin", origin);
          }
          if (req.Method == "OPTIONS")
          {
              res.StatusCode = 200;
              res.Headers.AppendCommaSeparatedValues("Access-Control-Allow-Methods", "GET", "POST");
              res.Headers.AppendCommaSeparatedValues("Access-Control-Allow-Headers", "authorization", "content-type");
              return;
          }
      }
      await next();
  });

Si vous utilisez Jersey pour les API REST, vous pouvez procéder comme ci-dessous

Vous n'avez pas à modifier votre implémentation de services Web.

Je vais vous expliquer pour Jersey 2.x

1) Ajoutez d'abord un ResponseFilter comme indiqué ci-dessous

import java.io.IOException;

import javax.ws.rs.container.ContainerRequestContext;
import javax.ws.rs.container.ContainerResponseContext;
import javax.ws.rs.container.ContainerResponseFilter;

public class CorsResponseFilter implements ContainerResponseFilter {

@Override
public void filter(ContainerRequestContext requestContext,   ContainerResponseContext responseContext)
    throws IOException {
        responseContext.getHeaders().add("Access-Control-Allow-Origin","*");
        responseContext.getHeaders().add("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");

  }
}

2) puis dans le web.xml, dans la déclaration du jersey servlet, ajoutez ce qui suit

    <init-param>
        <param-name>jersey.config.server.provider.classnames</param-name>
        <param-value>YOUR PACKAGE.CorsResponseFilter</param-value>
    </init-param>

J'ai renoncé à essayer de résoudre ce problème.

Mon web.config IIS avait le "Access-Control-Allow-Methods " , j'ai expérimenté l'ajout de paramètres de configuration à mon code angulaire, mais après avoir brûlé quelques heures en essayant de faire appeler Chrome un service Web JSON interdomaine, j'ai abandonné misérablement.

À la fin, j'ai ajouté une page Web de gestionnaire ASP.Net stupide, cela pour appeler mon service Web JSON et renvoyer les résultats. Il était opérationnel en 2 minutes.

Voici le code que j'ai utilisé:

public class LoadJSONData : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        string URL = "......";

        using (var client = new HttpClient())
        {
            // New code:
            client.BaseAddress = new Uri(URL);
            client.DefaultRequestHeaders.Accept.Clear();
            client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
            client.DefaultRequestHeaders.Add("Authorization", "Basic AUTHORIZATION_STRING");

            HttpResponseMessage response = client.GetAsync(URL).Result;
            if (response.IsSuccessStatusCode)
            {
                var content = response.Content.ReadAsStringAsync().Result;
                context.Response.Write("Success: " + content);
            }
            else
            {
                context.Response.Write(response.StatusCode + " : Message - " + response.ReasonPhrase);
            }
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

Et dans mon contrôleur angulaire ...

$http.get("/Handlers/LoadJSONData.ashx")
   .success(function (data) {
      ....
   });

Je suis sûr qu'il existe un moyen plus simple / plus générique de le faire, mais la vie est trop courte ...

Cela a fonctionné pour moi et je peux maintenant faire un travail normal !!

Pour un projet IIS MVC 5 / Angular CLI (Oui, je suis bien conscient que votre problème est lié à Angular JS) avec l'API, j'ai fait ce qui suit:

web.config sous le <system.webServer>noeud

    <staticContent>
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type, atv2" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS"/>
      </customHeaders>
    </httpProtocol>

global.asax.cs

protected void Application_BeginRequest() {
  if (Request.Headers.AllKeys.Contains("Origin", StringComparer.OrdinalIgnoreCase) && Request.HttpMethod == "OPTIONS") {
    Response.Flush();
    Response.End();
  }
}

Cela devrait résoudre vos problèmes pour MVC et WebAPI sans avoir à faire tout le reste. J'ai ensuite créé un HttpInterceptor dans le projet CLI angulaire qui a automatiquement ajouté les informations d'en-tête pertinentes. J'espère que cela aide quelqu'un dans une situation similaire.

Un peu tard pour la fête,

Si vous utilisez Angular 7 (ou 5/6/7) et PHP comme API et que vous obtenez toujours cette erreur, essayez d'ajouter les options d'en-tête suivantes au point final (API PHP).

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

Remarque : ce qui nécessite uniquement, c'est Access-Control-Allow-Methods. Mais, je colle ici deux autres Access-Control-Allow-Originet Access-Control-Allow-Headers, simplement parce que vous aurez besoin de tout cela pour être correctement configuré afin que Angular App puisse parler correctement à votre API.

J'espère que cela aide quelqu'un.

À votre santé.