AngularJS effectue une requête HTTP pour un cross-origin resource

Angulaire 1.2.0rc1+, vous devez ajouter un resourceUrlWhitelist.

1.2: version ils ont ajouté une escapeForRegexp fonction de sorte que vous n'avez plus à échapper à la les chaînes. Vous pouvez simplement ajouter l'url directement

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

assurez-vous d'ajouter ** pour les sous-dossiers. Ici, c'est un travail jsbin pour 1.2:
http://jsbin.com/olavok/145/edit

---

1.2.0 rc: Si vous êtes toujours sur une version rc, l'angle 1.2.0rc1 la solution ressemble:

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

Ici est un jsbin exemple où il travaille pour la 1.2.0rc1:
http://jsbin.com/olavok/144/edit

---

Pré 1.2: Pour les versions plus anciennes (réf 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'];

Ici est un jsbin exemple où il travaille pour le pré 1.2 les différentes versions:
http://jsbin.com/olavok/11/edit

Votre service doit répondre à un OPTIONS demande avec des en-têtes comme celles-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]

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

Cela a réglé mon problème:

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

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

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

• Puis modifier le fichier de App_Start\WebApiConfig.cs

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

• Ajouter cet attribut sur votre contrôleur de classe

  [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, par ce moyen,

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

Référence :
L'activation de la Croix-Origine des Demandes en ASP.NET Web API 2

Parfaitement décrit dans pkozlowski commentaire.
J'avais solution de travail avec AngularJS 1.2.6 et ASP.NET l'Api Web mais quand je l'eus mis à jour AngularJS pour 1.3.3 demande ensuite échoué.

• Solution pour le Web Api serveur était d'ajouter le traitement des OPTIONS de demandes au début de la méthode de configuration (plus d'info dans ce 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();
  });

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

Mon web IIS.config avait " laAccess-Control-Allow-Methods" en elle, j'ai testé l'ajout de paramètres de configuration pour mon Angulaire de code, mais après la combustion de quelques heures à essayer d'obtenir de Chrome à l'appel inter-domaine JSON web service, j'ai laissé tomber lamentablement.

À la fin, j'ai ajouté un muet ASP.Net gestionnaire de la page web, obtenu que d'appeler mon JSON web service, et de retourner les résultats. Il a été 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 Angulaire contrôleur...

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

Je suis sûr qu'il y a plus simple/plus générique façon de faire cela, mais la vie est trop courte...

Cela a fonctionné pour moi, et je peux obtenir sur avec faire travail normal maintenant !!

Peu en retard à la fête,

Si vous utilisez Angulaire 7 (ou 5/6/7) et PHP comme l'API, et toujours cette erreur, essayez de l'ajouter à la suite de l'en-tête des options pour le point de fin (PHP API).

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

Note : Ce qui ne nécessite est Access-Control-Allow-Methods. Mais, je suis coller ici deux autres Access-Control-Allow-Origin et Access-Control-Allow-Headers, tout simplement parce que vous aurez besoin de tous ces être correctement placé dans l'ordre Angulaire Application à bien parler à votre API.

Espère que cela aide quelqu'un.

Acclamations.