AngularJS - CORS Error only with HTTP GET

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.

https://stackoverflow.com/questions/1077218/are-different-ports-on-the-same-server-considered-cross-domain-ajax-wise — brso05, Jun 27 '17 at 15:23
Could it be related to [this](https://stackoverflow.com/questions/5584923/a-cors-post-request-works-from-plain-javascript-but-why-not-with-jquery)? You might need to put more things in your `Access-Control-Allow-Headers` if angular is adding them. Inspect the request and see exactly what headers are sent. — Karl Reid, Jun 27 '17 at 15:24
If the ports are different you are violating the browser same-origin policy... — brso05, Jun 27 '17 at 15:24
The different port is the problem? That means the frontend and backend have to run on the same port? — Hannes, Jun 27 '17 at 15:27

score 0 · Answer 1 · answered Jun 27 '17 at 15:27

0

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

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

answered Jun 27 '17 at 15:27

Cameron Sima

5,086
6
28
47

score 0 · Answer 2 · answered Jun 27 '17 at 15:30

0

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.

answered Jun 27 '17 at 15:30

Amit Mahajan

895
6
34

score 0 · Accepted Answer · answered Jun 28 '17 at 12:46

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.

AngularJS - CORS Error only with HTTP GET

3 Answers3