angular-js cors request not getting to the server

Question

I have a spring MVC API backend with CORS configured correctly when i try to make the ajax call i get the following error in chrome

XMLHttpRequest cannot load 172.20.16.45:8082/cuponza. The request was redirected to '172.20.16.45:8082/cuponza/', which is disallowed for cross-origin requests that require preflight.

my js code is here:

    $scope.sendRegistrationForm = function(){
        var config = {headers:  {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods' : 'GET,OPTIONS',
        'Access-Control-Allow-Headers' : 'X-Requested-With, Content-Type',
        'Content-Type' : 'text/plain',
        'Accept-Language' : 'en-US'
    }
};
        $http.get("172.20.16.45:8082/cuponza",config).
    success(function(data){
            alert(data);
        }).
        error(function(data,status){
            alert(status);
        })
        }

i tried to start chrome with the flag --disable-web-security and by doing that i was able to see my server side CorsFilter working correctly, i also got a correct response from the server ,this is why im positive my error is in the client side. when starting chrome normally ,the filter on the server never even kicks in.

UPDATE : when i remove the config object with the cors headers i get the following error

    XMLHttpRequest cannot load 172.20.16.45:8082/cuponza

. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '
    localhost:8100' is therefore not allowed access

UPDATE II im showing the requests as shown by chrome: starting chrome normally:

OPTIONS /cuponza HTTP/1.1 Host: 172.20.16.45:8082 Connection: keep-alive Access-Control-Request-Method: GET Origin: localhost:8100 User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.143 Safari/537.36 Access-Control-Request-Headers: access-control-allow-origin, accept-language, access-control-allow-headers, access-control-allow-methods Accept: / Referer: localhost:8100/ Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8

starting chrome in --disable-web-security mode

GET /cuponza HTTP/1.1 Host: 172.20.16.45:8082 Connection: keep-alive Access-Control-Allow-Origin: * Accept-Language: en-US Access-Control-Allow-Headers: X-Requested-With, Content-Type User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.143 Safari/537.36 Access-Control-Allow-Methods: GET,OPTIONS Accept: / Referer: localhost:8100/ Accept-Encoding: gzip,deflate,sdch

naoru naoru · Accepted Answer · 2014-08-19T19:49:44

solutions is two fold in your front end you must add an empty configuration object like this

var config = {}; and later add it to the angular call $http.post(url.config); reason for this is that without empty config object angular sets the method type to POST and than the filter check to see if the content-type is text/plain , and its not since its not set by default, if you send the empty params, angular sets the method to option and than different logic apply to the filter.

part II in your web.xml in the filter setting you must add the following header: access-control-allow-origin to the allowed headers like this

<init-param>
        <param-name>cors.allowed.headers</param-name>
        <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,access-control-allow-origin</param-value>
    </init-param>

with this your tomcat is CORS ready

angular-js cors request not getting to the server

1 Answers