Angularjs Post Request CORS issue

ionic-v1
1 
$http.post('http://localhost:8000/api/item/', {
           some json
        }).success(function (data) {
            console.log(data);
        });

angularjs seems not working properly with cross domain.
keeps throwing this "XMLHttpRequest cannot load http://localhost:8000/api/item/. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8100’ is therefore not allowed access. "

also, enable cors plugin in chrome still gives an error "Request header field Content-Type is not allowed by Access-Control-Allow-Headers. "

$http({
        method: 'POST',
        url: 'http://localhost:8000/api/item',
        data: {
           some json
        },
        headers: {'Content-Type': undefined}
    
    });

using this code produce 500 internal error. Is there anyone know how to fix this? by the way, I also tried to add $httpproivder to enable cors that apparently is not working either.

however, $ajax works like charm.

$.post('http://localhost:8000/api/item/', {some json}).done(
            function (data) {
                console.log(data);
            }
        );
2

Hi @summermick,

You shouldn’t have CORS issues when running on the device. CORS problems are browser only.

In your web server if you allow all origins (*), the error should go away in the browser.

See more information here:

3

thanks nicaboy.
I pretty much gave up.

4

i had same problem on device emulated and via ionic serve
,the problem is cors for sure i tried to use this angular code but it not work ,but the solution is near something like this:

   $http.get('http://webservice:8080/services/webservices/testservice',
		            {
		            headers: {
		                'Content-Type': 'application/json' , 
		                'Access-Control-Allow-Origin': '*',
		                'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
		                'Access-Control-Allow-Headers':'X-Requested-With'	
		            }
		        }).success(function(response) {
		           alert("Ok");

		        }).
	            error(function (data, status) {
	                alert(JSON.stringify(data));
	                alert(JSON.stringify(status));
	            });

the request never start from the app becouse i tested with a breakpoint on the webservice rest implementation and it never stop ,that mean no request sended by browser

5

Nic, I know you said there should be no CORS issues but I don’t know what else my problem could be and it’s sooo frustrating … I’ve been searching and searching I don’t know what’s going on… I keep getting a status:0 error message with the following code:

$scope.feedlyApi = function() {

var req = {
	method: 'GET',
	url: "http://sandbox.feedly.com/v3/search/feeds",
	params: {
		'query': 'nursing'
	},
	headers: {
	      'Content-Type': 'application/json' , 
	       'Access-Control-Allow-Origin': '*',
	        'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
	      'Access-Control-Allow-Headers':'X-Requested-With'	
	 }		
}

$http(req).success(function(res) {
	console.log(res);
	console.log('Success', angular.toJson(res.data));
}).error(function(err){
	console.error(angular.toJson(err))
})

}

I added the chrome plugin to enable CORS and the API request is successful when i use ionic serve however when i run ionic emulate --live reload I can’t get it to work

6

You can use thins plugin too for solving browser related problem —>>