0

Hey getting error mentioned above. It is running fine on mobile but not on browser.preflight has invalid HTTP status code 403. Backend developer says he has coded everything perfectly at the backend. So in case if something is possible at the frontend let me know please. I have downloaded "CORS" extension in chrome.

Controller.js

.controller('LoginCtrl', function($scope, $http,$rootScope,$window,$location,$state) {
$scope.formData = {};
$scope.processForm = function() {
$http({
  method  : 'POST',
  url     : 'http://abc/login',
  data    : $.param($scope.formData),
  headers : { 'Content-Type': 'application/x-www-form-urlencoded', 'X-API-KEY': 'abcfjo-jrabc-ltjerabcabcabc' }
 })
.success(function (data, status, headers, config) {
            $scope.foo = data;
            $state.go('tab.dash');
              // $location.path('#/tab/new-order');


        })
        .error(function (data, status, header, config) {
            $window.alert("username or password incorrect");
        });
};

})

html

<form action="" class="ki-login-form" method="post" accept-charset="utf-8"  >
                <div class="form-group username">
                    <input type="text" class="form-control" name="username" ng-model="formData.username" value="" id="identity" placeholder="Your Name">
            </div>
                <div class="form-group pin">
                    <input type="text" class="form-control" name="password" ng-model="formData.password" value="" id="identity" placeholder="Your Pin">
                </div>
                <a type="submit" class="btns" ng-click="processForm(formData.username,formData.username)">Login</a>
        </form>

app.js

angular.module('starter', ['ionic','starter.controllers', 'starter.services', 'ngCordova'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
  cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  cordova.plugins.Keyboard.disableScroll(true);

}
if (window.StatusBar) {
  // org.apache.cordova.statusbar required
  StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider,$httpProvider) {
   $stateProvider
    .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })

Error XMLHttpRequest cannot load http://abc/login. Response for preflight has invalid HTTP status code 403

kk19
  • 27
  • 10
  • Could you please add the log output from the 403 response. I assume there is an error because you are sending some custom header that is not white listed in the backend for cors requests. – Andreas Jägle Nov 18 '16 at 08:19
  • but backend developer says I have to send this static key "X-API-Key" – kk19 Nov 18 '16 at 08:20
  • XMLHttpRequest cannot load http://abc/login. Response for preflight has invalid HTTP status code 403 – kk19 Nov 18 '16 at 08:21
  • Earlier I was able to get json data using this same code and I didn't edit it but now I'm getting this error suddenly – kk19 Nov 18 '16 at 08:26
  • Are you sure that you also used the x-api-key header back then? See the cors spec for reasons of rejection. I would suggest to have a look at the backend logs. The backend must whitelist all headers that are allowed, otherwise reject the request. See step 6 here https://www.w3.org/TR/cors/#resource-preflight-requests – Andreas Jägle Nov 18 '16 at 08:29
  • Yes I got above response as json when I did that. Image is displayed above – kk19 Nov 18 '16 at 08:34
  • So shall I try removing that X_API_KEY? – kk19 Nov 18 '16 at 08:39
  • http://stackoverflow.com/questions/27729351/preflight-options-request-by-angularjs-not-working-with-chr I found this it says I must remove header from AngularJs service $httpProvider in config: – kk19 Nov 18 '16 at 08:42

0 Answers0