Próbuję dokonać prośby HTTP z Angularjs. Pracuje tylko w programie Internet Explorer 11. Kiedy próbuję wykonać połączenie w Chrome, Firefox lub Edge, nie działa.

Otrzymuję następujący błąd:

Błąd CORS w Chrome

To jest mój telefon Angularjs:

 $http({
              method: 'POST',
               headers: {
                'Content-Type': 'application/json'
              },
              url: URL
              }).then(function successCallback(response) {
                  console.log(response.data);

              }, function errorCallback(response) {
                console.log(response.status);
                console.log(response.headers);
                console.log(response.config);
              });

Ponieważ backend mam aplikację Java Spring MVC i ustawiłem następujące nagłówki:

    HttpHeaders responseHeader = new HttpHeaders();
    responseHeader.set("Access-Control-Allow-Origin","*");
    responseHeader.set("Access-Control-Allow-Headers:","Content-Type");
    responseHeader.set("Access-Control-Allow-Methods","POST, GET, PUT, OPTIONS, DELETE");
    responseHeader.set("Content-Type","application/json");

Ale widziałem, że kanciasty nigdy nie osiąga backend, gdy ustawię punkt przerwania! Jest to bardzo mylące, już szukałem w Internecie i próbowałem zmienić domyślny nagłówek typu Content AngularJS:

$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8';

Próbowałem również zmienić typ treści w post-prośbę do "Application / X-WWW-formularz-Urlenkoded" - bez efektu.

Uwaga: Backend i frontend działa na tej samej maszynie dev. Jedyną różnicą jest port, dlatego jestem zdezorientowany, że otrzymuję błąd CORS w ogóle ...

Mam ten problem tylko z post-prośbami; Get działa jak urok

Edycja 1:

Myślałem, że jest to problem z CORS i że używam różnych portów, ale czy to możliwe, że mogę to wyłączyć?

Edycja 2:

Teraz staram się, aby pracować z lokalnym tomcatem. Teraz widzę w Tomcat żądanie dotrze do serwera:

<< Client IP>> - - [28/Jun/2017:13:43:24 +0200] "OPTIONS <<URL>> HTTP/1.1" 403 -

Odpowiedź jest teraz http 403. W karcie Network przeglądarki widzę następujący nagłówek żądania:

  Host: <<backend ip>>:8080
User-Agent: <<user agent>>
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: de,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: POST
Access-Control-Request-Headers: access-control-allow-origin,content-type
Origin: http://<<Ip of host>>
Connection: keep-alive

Odpowiedź tego nagłówek żądania jest następujący:

Content-Type: text/plain
Content-Length: 0
Date: Wed, 28 Jun 2017 11:43:24 GMT

Ustawiłem filtr CORS Podobnie jak przykład w dokumentacji TomCat: http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html#cors_filter.

Kiedy dokonuję zamówienia, nadal działa i wszystkie nagłówki CORS są obecne. Myślę, że coś jest nie tak z pierwszymi żądaniami opcji. Nie wiem, dlaczego Tomcat nie ustawia nagłówek CORS, gdy przychodzi żądanie opcji.

0
Hannes 27 czerwiec 2017, 18:21

3 odpowiedzi

Najlepsza odpowiedź

Rozgryzłem to. Zrobiłem zupełnie nową stronę testową Angularjs. To jest mój pracujący kod AngularJS:

 var req = {
 method: 'POST',
 url: 'myURL',
 headers: {
   'Content-Type': undefined
 },
 data: "JSON BODY DATA"
}

$http(req).then(function successCallback(response) {
    console.log(response.data);
  }, function errorCallback(response) {
    console.log(response.data);
  });
}]);

Usunąłem wszystko, co zmieniło domyślne nagłówki AngularJS. Nagłówki mojej wiosny aplikacji MVC są następujące:

HttpHeaders responseHeader = new HttpHeaders();
responseHeader.set("Access-Control-Allow-Origin","http://<<clientip>>");
responseHeader.set("Access-Control-Allow-Headers:","Content-Type");
responseHeader.set("Access-Control-Allow-Methods","POST, GET, PUT, OPTIONS, DELETE");
responseHeader.set("Content-Type","application/json");

Nie wiem dokładnie, ponieważ działa teraz. Może to dlatego, że zmodyfikowałem domyślne nagłówki w Angularjs.

0
Hannes 28 czerwiec 2017, 12:46

Ponieważ otrzymujesz błąd 400 (nie autoryzowany), żądanie nie osiąga samej usługi. Najprawdopodobniej domena żądania jest zablokowana, możesz zobaczyć, czy żądania XHR są dozwolone i sprawdzaj politykę pochodzenia Cross, jeśli to konieczne.

0
amitmah 27 czerwiec 2017, 15:30

W swoim sterowniku, dodaj @CrossOrigin('http://localhost:8080')

Adnotacja. Oczywiście zastępuj port aplikacji kątowej.

0
Cameron Sima 27 czerwiec 2017, 15:27