Ionic and AngularJS HTTPS Post Requset

Question

I am trying to request to HTTPS server via the post method in Ionic app. But every time, I am failing. I've tried with 2 ways. One way is using $http, and the other way is using $.ajax. But still not found the correct way. The codes are following as below.

-Using $http:

$http({
    url: "https://beta.test.com/auth/authenticate/",
    method: "POST",
    data: {
        "userName": "vv9@test.com",
        "password": "vv9",
        "ipAddress": "2d:5d:3s:1s:3w",
        "remeberMe": true
    },
    headers: {
        'Content-Type': 'application/json'
    }
}).success(function(res) {
    $scope.persons = res; // assign  $scope.persons here as promise is resolved here
}).error(function(res) {
    $scope.status = res;
});

-Using $.ajax:

$.ajax({
    url: "https://beta.test.com/auth/authenticate/",
    type: "POST",
    data: {
        "userName": "vv9@test.com",
        "password": "vv9",
        "ipAddress": "2d:5d:3s:1s:3w",
        "remeberMe": true
    },
    headers: {
        'Content-Type': 'application/json'
    }
}).done(function() {
    console.log('Stripe loaded');
}).fail(function() {
    console.log('Stripe not loaded');
}).always(function() {
    console.log('Tried to load Stripe');
});

How can solve this problem? What's wrong in the codes?

What error are you getting and whats your expected response? — alphapilgrim, May 05 '16 at 20:38
The error is XMLHttpRequest cannot load `https://beta.test.com/auth/authenticate/`. Response for preflight has invalid HTTP status code 404 — Michael Lee, May 05 '16 at 20:42
If you can access the server then this is a solution for you.http://stackoverflow.com/a/33820700/5686100 — Atula, May 06 '16 at 05:35

alphapilgrim · Accepted Answer · 2016-05-05T20:56:13.663

Here is something to get you started, I will update if you provide some plunker or more code.

(function() {
  'use strict';

  angular
    .module('example.app', [])
    .controller('ExampleController', ExampleController)
    .service('exampleServce', exampleServce);

  function ExampleController(exampleService) {
    var vm = this;

    vm.update = function(person, index) {
      exampleService.updatePeople(person).then(function(response) {
        vm.persons = response;
      }, function(reason) {
        console.log(reason);
      });
    };
  }


  // good practice to use uppercase variable for URL, to denote constant.    
  //this part should be done in a service

  function exampleService($http) {
    var URL = 'https://beta.test.com/auth/authenticate/',
      data = {
        "userName": "vv9@test.com",
        "password": "vv9",
        "ipAddress": "2d:5d:3s:1s:3w",
        "remeberMe": true
      },
      service = {
        updatePeople: updatePeople
      };

    return service;

    function updatePeople(person) {
      //person would be update of person.
      return $http
        .post(URL, data)
        .then(function(response) {
          return response.data;
        }, function(response) {
          return response;
        });
    }
  }
})();

It's same as before. XMLHttpRequest cannot load `https://beta.test.com/auth/authenticate/`. Response for preflight has invalid HTTP status code 404 — Michael Lee, May 05 '16 at 20:46
let me update, are you sure you endpoint is correct. try not to include headers type. — alphapilgrim, May 05 '16 at 20:47
The header type is 'Content-Type': 'application/json'. But same error. — Michael Lee, May 05 '16 at 20:52
how do you secure the data which is being posted using $http.?? — Sunil Rawat, Nov 28 '17 at 10:59

Ionic and AngularJS HTTPS Post Requset

1 Answers1