AngularJS - CORS Fehler nur mit HTTP GET

Question

Ich versuche, eine HTTP-Abfrage von AngularJS zu machen. Es funktioniert nur im Internet Explorer 11. Wenn ich versuche, einen POST-Anruf in Chrome, Firefox oder Edge zu machen, funktioniert es nicht.

bekomme ich folgende Fehlermeldung:

CORS Error in Chrome

Das ist mein AngularJS Aufruf:

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

Als Backend Ich habe eine Java Spring MVC-Anwendung und ich habe die folgenden Header gesetzt:

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

Aber ich sah, dass angular nie die bac erreicht kend wenn ich einen Haltepunkt setze! Dies ist sehr verwirrend, suchte ich schon viel im Internet und versuchte, die Standard AngularJS Content-Type-Header geändert:

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

ich auch versucht, den Content-Type in dem POST-Request zu ändern „application/x-www-form-urlencoded "- ohne Wirkung.

Hinweis: Das Backend und das Frontend laufen auf demselben Dev-Rechner. Der einzige Unterschied ist der Port, deshalb bin ich verwirrt, dass ich überhaupt einen CORS-Fehler bekomme ...

Ich habe dieses Problem nur mit POST-Requests; GET funktioniert wie ein Charme

Edit 1:

dachte ich, dass dies ein Problem mit cors ist und dass ich verschiedene Ports verwenden, aber ist es möglich, dass ich das abschalten kann?

Edit 2:

Jetzt versuche ich es mit einem lokalen Kater zur Arbeit zu kommen. Jetzt sehe ich in der Tomcat wird die Anfrage den Server erreichen:

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

Die Antwort ist jetzt HTTP 403. Im Browser Registerkarte Netzwerk kann ich die folgenden Request-Header sehen:

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 

Die Antwort davon Request-Header ist die folgende:

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

ich die cors wie das Beispiel in der tomcat Dokumentation Filter gesetzt haben: http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html#CORS_Filter

Wenn ich eine Get-Anfrage mache, funktioniert es immer noch und alle CORS-Header sind vorhanden. Ich glaube, mit der ersten OPTIONS-Anfrage stimmt etwas nicht. Ich weiß nicht, warum der Tomcat den CORS-Header nicht setzt, wenn die OPTIONS-Anfrage kommt.

Answer 1

Ich fand es heraus. Ich habe eine komplett neue angularjs Testwebsite erstellt. Das ist meine Arbeit angularjs Code:

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

Ich löschte alles, das die Standard-angularjs-Header geändert. Die Header meiner Spring MVC Anwendung sind die folgenden:

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

Ich weiß nicht, die genau dazu führen, warum es jetzt funktioniert. Vielleicht lag es daran, dass ich die Standard-Header in AngularJS geändert habe.

Answer 2

In Ihrem Frühlings-Controller, fügen @CrossOrigin('http://localhost:8080')

Anmerkung. Natürlich ersetzen Sie den Port Ihrer eckigen Anwendung.

Answer 3

Da Sie 400 (nicht autorisiert) Fehler erhalten, erreicht die Anfrage den Dienst selbst nicht.Höchstwahrscheinlich ist die Anfragedomäne blockiert, Sie können sehen, ob XHR-Anfragen erlaubt sind, und ggf. die Herkunftsrichtlinie überprüfen.