XMLHttpRequest Issue

ionic-v1
1

When I serve my app I run into trouble when the program runs an http.post() command with a PHP script in my public_html. On my console I get the error message XMLHttpRequest cannot load http://localhost/script.php. Invalid HTTP status code 500. Is there a way to fix this? I have a CORS extension on chrome, might that be part of the problem? I make sure to include a header in the script for CORS though. Any help at all is very much appreciated.

2

I was using the CORS extension for Chrome as well until I found out it was transform my request improperly and setting the post type to ‘method’. Just start chrome with disable-web-security (google that :slight_smile: ). Just beware of that CORS extension.

3

Just modified chrome to Exec=/opt/google/chrome/google-chrome --incognito --disable-web-security but still nothing. Is there a way to configure my PHP error log? I added the line error_log = /var/log/php-scripts.log to my php.ini file but errors aren’t showing in my dev console.

4

Not sure how relevant this would be to your issue since I don’t use PHP, but I was struggling to get callouts to work with $http in my ionic app and found this structure through lots off Googling:

return $http( {
				        url: authParams.url,
				        method: 'POST',
				        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				        responseType: 'json',
				        transformRequest: function(obj) {
				          var str = [];
				          for(var p in obj) {
				            str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p]));
				          }
				          return str.join('&');
				        },
				        data: {
				          grant_type: 'password',
				          client_id: authParams.key,
				          client_secret: authParams.secret,
				          username:  username,
				          password: password + authParams.securityToken
				        }
				    });

Notice the transformRequest param and the content-type header of ‘application/x-www-form-urlencoded’, those seemed to be the kickers. Also try you callout in Postman to make sure it works on the most basic level. Hope it helps…

5

This works for me in my UserFactory:

/*
* Update the user’s location details in the database and in localStorage
*/

        update: function () {

            var deferred = $q.defer();

            data = {
                'user_id': localStorage['user_id'],
                'latitude': localStorage['latitude'],
                'longitude': localStorage['longitude']
            };

            $http.defaults.headers.common['token'] = localStorage['token'];

            return $http({
                method: "post",
                url: 'https://myApiUrl/',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                data: data
            })
                .then(function (data) {
                    object = JSON.parse(data.data);
                    if (object.response.status == 'success') {
                        deferred.resolve();
                        return deferred.promise;
                    } else {
                        deferred.reject();
                        return deferred.promise;
                    }
                }, function (data) {
                    deferred.reject();
                    return deferred.promise;
                }
            );
        },
6

Why don’t you enable CORS in your server with something like this:

res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
res.header('Access-Control-Allow-Credentials', true);
7

Could you give an example code in github because I have same problem with OP such as get a “500 (Internal Server Error)” as error message on console log?

I am using laravel as backend server