$http.post CORS issue

ionic-v1
1

Here is my code and I’m still in pre-flight options when I do $http.post. Any help. I tried everything possible I can. Am I missing anything here?

$scope.onTabSelected = function(getItem) {
var data = {‘prod_category’ : getItem};
$http.post(‘http://localhost:3000/getMenuItems’, data, {
headers:{
‘Access-Control-Allow-Origin’: ‘*’,
‘Access-Control-Allow-Headers’: ‘X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method’,
‘Content-Type’:‘application/json’,
‘Access-Control-Allow-Methods’ : ‘GET, POST, OPTIONS, PUT, DELETE’
}
})
.success(function(data, status, headers,config){
})
.error(function(data, status, headers,config){
})
}

2

Problem is all the Access-Control-Allow-* headers have to go on the server-side not the client-side.

The angular $http client will first issue an HTTP OPTIONS, and the server should respond with the Access-Control-Allow headers. If everything checks out then the angular $http client will do the POST.

If you don’t have control over the server then you can use a proxy of some sort (mentioned elsewhere on the forum) or you can start chrome with the --disable-web-security command line switch (https://blog.nraboy.com/2014/08/bypass-cors-errors-testing-apis-locally/)

Remember that inside the actual App you don’t need to care about CORS and all these headers - it’s only a problem while testing in the browser with ionic serve.

3

Thanks much. That was helpful and solved my issue. I added the CORS vars in my node.js express app which resolved.