AngularJS-仅使用HTTP GET的CORS错误

Question

I am trying to make a http get request from AngularJS. It is only working in the Internet Explorer 11. When I try to make a POST Call in Chrome, Firefox or Edge it is not working.

I get the following error:

CORS Error in Chrome

This is my AngularJS Call:

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

As backend I have a Java Spring MVC Application and I have set the following headers:

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

But I saw that angular never reaches the backend when I set a breakpoint! This is very confusing, I already searched a lot in the internet and tried to changed the default AngularJS Content-Type header:

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

I tried also to change the Content-Type in the POST-Request to "application/x-www-form-urlencoded" - with no effect.

Note: The backend and the frontend runs on the same dev machine. The only difference is the port, that's why I am confused that I get a CORS Error at all...

I have this problem only with POST-Requests; GET works like a Charm

Edit 1:

I thought that this is a Problem with cors and that i use different ports, but is it possible that I can turn that off?

Edit 2:

Now i try to get it to work with a local tomcat. Now i see in the Tomcat the request will reach the server:

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

The Response is now HTTP 403. In Browsers network tab i can see the following request header:

  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

The Response of that request header is the following:

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

I have set the cors filter like the example in the tomcat documentation: http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html#CORS_Filter

When i make a get request, it is still working and all CORS headers are present. I think there is something wrong with the first OPTIONS request. I dont know why the tomcat do not set the CORS header when the OPTIONS request comes.

Answer 1

In your Spring Controller, add @CrossOrigin('http://localhost:8080')

annotation. Of course, substitute out the port of your angular application.

Answer 2

Since you are getting 400 (not authorized) error, the request is not reaching the service itself. Most probably the request domain is blocked, you may see if XHR requests are allowed and check cross origin policy if needed.

Answer 3

I figured it out. I made a completly new angularjs testwebsite. This is my working 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);
  });
}]);

I deleted anything that changed the default angularjs headers. The headers of my Spring MVC Application are the following:

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

I dont know the exactly cause why it is working now. Maybe it was because i modified the default headers in AngularJS.