i’m using this api https://github.com/mevdschee/php-crud-api on my server here http://activeengg.com/sandbox/api.php/teams/ , GET works fine, but POST always returns a null, when it should return the new record id.
Tried the proxy for CORS but at times the request converts to OPTIONS.
Also tried adding Access-Control-Allow-Origin to the api.php.
Maybe I am wrong, but it looks like you do not have a good callback. Like you are not waiting the response so the return is null. Can you show us your POST function ?
Have you tried opening up dev tools in your browser and checking the Network tab?
Here you can check all requests you are making, and find the POST request to see why its failing.
The first things that come to mind are a bad formed POST request. Like gensollen mentioned, can you show us your POST request?
When I ran into this issue, one thing I did (a little more complicated but a great learning exercise) was open the network tab for where I could make the post request. In your case that would be www.hurl.it. And monitor the network tab for that request.
If you click that request, you should be able to see the Headers being sent along with the request body.
Once you see how its formed, compare it to yours which is failing. Make sure you are sending all the correct headers and the formData is correctly formatted.
Finally, the POST request isn’t actually being converted to OPTIONS. Whats happening is your app is sending the OPTIONS request first, to find out if the POST request is safe to make or not. Its a little more complicated than that, but its 100% ok to be seeing an OPTIONS request before a POST request. You can also check that OPTIONS request to see if it comes back successful, and if not, it can give you a clue why.
$scope.doSubmit = function(addteam){
$rootScope.showLoading();
var url = “/teams”;
$http({
cache: false,
url: ApiEndpoint.url+’/teams’,
method: “POST”,
data: JSON.stringify(addteam),
headers: {‘Content-Type’: ‘application/x-www-form-urlencoded’ }
}).
success(function (data){
// here the “data” parameter has your response data
alert(data);
$rootScope.showLoading();
}
).
error(function () {
// if you are here something is not going so good
}
)
}
If you are running the server locally, if you are testing it on your actual device, make sure it can access that server and port.
If I need to test an endpoint from an actual device, many times, I can’t run local host. I need to deploy my server to an actual host and use that. (I use Heroku hosting for example)
There is ways to work around that, but I’m lazy and just upload the server if I really need to.
But in the successful POST (through hurl) it looks like it is setting the encoding as :
application/json
This will change how the server intrepets the request, which can cause errors.
Try changing your post request to :
headers: {
'Content-Type' : 'application/json'
}
Hopefully that helps. I’ll be online for the next hour or so if you need help. Then I’ll be back on tomorrow afternoon. Good luck. (I remember being stuck on something very similar for like 3 days and it sucked trying everything with nothing working. My problem was the formatting of the formData but yours looks good)
Actually, it looks like it is working. In that screenshot, the POST request is coming back with a status code 200. Are you sure you are requesting the correct data? In your hurl example, you are including extra fields and a different teamname.
If the POST request isn’t coming back as status code 200, then it could be something wrong. I’d make sure you are passing the same parameters before changing the request first.
1)added the config, no change
2)server is not local, its here http://activeengg.com/sandbox/api.php/teams/ the api code sourced from here https://github.com/mevdschee/php-crud-api, do u know a different/better one i’ll try changing that too.
3)changing to header to ‘Content-Type’ : ‘application/json’ returns 404 with this error
XMLHttpRequest cannot load http://activeengg.com/sandbox/api.php/teams. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8100’ is therefore not allowed access. The response had HTTP status code 404.
How are you running your app? Via ionic serve or an actual device? It looks like you are running it via ionic serve.
I think it should work on an actual device.
Oh I think that may be the issue. The server probably has some access control headers setup. That’s why the request works when you try from hurl since the request is coming from an actual site whereas if you try it via localhost, it’s not an actual site so it will fail.
You can try using ionic view, though I’m not too experienced with that.
What I normally do is ionic add platform {iod/androdi}
Then ionic build {ios/android}
Then deploy it to a device. Either through Xcode or adb.
I’m pretty sure that’s the issue. Once you make the request via a real device, I think you’ll be fine.
Edit
Or if you can change the server look up changing the access control headers. I can help you if it’s node.js but I’m not too familiar with php.
I’ve never used a proxy with an ionic project before, so I can’t say for certain if thats causing the issue. I think it could be, so yes, try removing it.
If that doesn’t work, and you don’t have access to the server, you can try hitting one of my servers and we can see whats wrong.
