Problems with Http.post method

ionic-v1
1

Hello
I have having some problems sending data to a server using the http.post method. Whenever i try to send the data i get the following error which i know to be cause to Same Origin Policy.

XMLHttpRequest cannot load http://energy-audit.22web.org/PHP/view.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://169.254.61.33:8100' is therefore not allowed access. The response had HTTP status code 403.

post(url, data, [config]);

When i remove the data parameter i get the response from the server but when it back i get the error above. The http get works fine but i need to get the post working so i can query item from my database.

On the server PHP i have the following CORS headers

header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");

but still get the error mentioned above…
IS there anyway to solve this issue…

thanks

2

So i was able to solve my issue by reading this post which stated the following

The problem you may encounter is that your server does not appear to receive the { foo: ‘bar’ } params from the AngularJS request.
The difference is in how jQuery and AngularJS serialize and transmit the data. Fundamentally, the problem lies with your server language of choice being unable to understand AngularJS’s transmission natively—that’s a darn shame because AngularJS is certainly not doing anything wrong. By default, jQuery transmits data using Content-Type: x-www-form-urlencoded and the familiar foo=bar&baz=moe serialization. AngularJS, however, transmits data using Content-Type: application/json and { “foo”: “bar”, “baz”: “moe” } JSON serialization, which unfortunately some Web server languages—notably PHP—do not unserialize natively.

The site also suggested the following be added

// Your app’s root module…
angular.module(‘MyModule’, , function($httpProvider) {
// Use x-www-form-urlencoded Content-Type
$httpProvider.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded;charset=utf-8’;

  /**
   * The workhorse; converts an object to x-www-form-urlencoded serialization.
   * @param {Object} obj
   * @return {String}
   */ 
  var param = function(obj) {
    var query = '', name, value, fullSubName, subName, subValue, innerObj, i;
      
    for(name in obj) {
      value = obj[name];
        
      if(value instanceof Array) {
        for(i=0; i<value.length; ++i) {
          subValue = value[i];
          fullSubName = name + '[' + i + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      }
      else if(value instanceof Object) {
        for(subName in value) {
          subValue = value[subName];
          fullSubName = name + '[' + subName + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      }
      else if(value !== undefined && value !== null)
        query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
    }
      
    return query.length ? query.substr(0, query.length - 1) : query;
  };
 
  // Override $http service's default transformRequest
  $httpProvider.defaults.transformRequest = [function(data) {
    return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
  }];
});

The issue was resolve after the above was added…

Hopefully this helps someone else as well