XMLHttpRequest cannot load 'URL'. Response for preflight has invalid HTTP status code 401

Question

I work on ionic. and got this error. Here are my app.js:

var app = angular.module('eMoMo', ['ionic', 'ngCordova'])
.config(['$httpProvider', function ($httpProvider) {
       //Reset headers to avoid OPTIONS request (aka preflight)
       $httpProvider.defaults.headers.common = {};
       $httpProvider.defaults.headers.post = {};
       $httpProvider.defaults.headers.get = {};
       $httpProvider.defaults.headers.delete = {};
       $httpProvider.defaults.headers.put = {};
       $httpProvider.defaults.headers.patch = {};
       $httpProvider.defaults.headers.common['Access-Control-Allow-Headers'] = '*';                                     
       //$httpProvider.defaults.headers.common['Authorization'] = 'Basic ' + btoa(my_id+ ':' + my_pass")
   }]);

app.controller('MainViewController',  function($scope, $http) {
  $http({
    method:"GET",
    url: "my_url"
      headers: {
        'content-type': 'application/x-www-form-urlencoded; charset=utf-8',
        'authorization': 'Basic ' + btoa('my_username' + ':' + 'my_pass')
        'access-control-allow-origin': '*'
    }
  }).then(function(categories){
    console.log(categories);
  });

});

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

)

I try to research, it is relate about CORS but I have install an plugin to chrome to disable that error. How can I solve this problem. ?

which version of chrome are you using? I reckon it might be 37 or 38? — Varit J Patel
@varit05 — What makes you think the OP is using such an ancient version of Chrome? — Quentin
If I'm not wrong 401 is Unathorized, probably the OPTIONS call is handled but since it has no authorization header it's rejected, you should handle OPTIONS to return 200 OK — maurycy

Quentin Quentin · Accepted Answer · 2016-07-12T09:15:10

Since you are adding custom headers, you are triggering a preflight request. Your plugin, presumably, just sticks Access-Control-Allow-Origin: * onto ever response before Chrome processes it. That doesn't help when the server responds to the OPTIONS request with an error.

You have four options:

Make sure the server is on the same origin so you don't need CORS (this may involve setting up a development server that better reflects your live environment)
Get the server to support CORS
Find a plugin which can handle preflight requests (or fix your existing one so it can)
Change your code so it doesn't generate a preflight request

A starting point for option 4 would be to remove:

$httpProvider.defaults.headers.common['Access-Control-Allow-Headers'] = '*';

and

'access-control-allow-origin': '*'

… since Access-Control-Allow-Origin and Access-Control-Allow-Headers are response headers and make no sense at all on a request.

You may still run into issues with your manual adding of an Authorization header though.

XMLHttpRequest cannot load 'URL'. Response for preflight has invalid HTTP status code 401

2 Answers