XMLHttpRequest 无法加载 .... 预检响应具有无效的 HTTP 状态代码 401答案

【问题标题】：XMLHttpRequest cannot load .... Response for preflight has invalid HTTP status code 401XMLHttpRequest 无法加载 .... 预检响应具有无效的 HTTP 状态代码 401
【发布时间】：2016-11-14 12:47:41
【问题描述】：

以下是我尝试进行基本身份验证的服务调用。我检查了多个博客都找不到解决方案。

当我遇到以下错误时，谁能帮我解决这个问题：

XMLHttpRequest 无法加载

预检响应包含无效的 HTTP 状态代码 401

我也无法在开发者选项的网络选项卡中找到基本身份验证。

function() {
    "use strict";
    var APIservice = function($http, $base64) {
        var getDetails = function(postData) {
            $http.defaults.headers.common['Access-Control-Allow-Origin'] = "*";
            $http.defaults.headers.common['Access-Control-Allow-Methods'] = "GET,PUT,POST,DELETE,OPTIONS";
            $http.defaults.headers.common['Access-Control-Allow-Headers'] = "Content-Type, Authorization, Content-Length, X-Requested-With";
            $http.defaults.headers.common['Content-Type'] = undefined;
            console.log($http.defaults.headers.common.Authorization);
            //console.log($http.defaults.headers.common.Authorization);
            return $http.get('http://52.74.68.202:8080/rest/v1/step/all')
                .then(function(response, headers, config) {
                    console.log(response);
                    return response;
                });
        };
        return {
            getDetails: getDetails
        }
    }
    var module = angular.module('expframework');
    module.factory("APIservice", APIservice);
    module.run(['$http', '$base64', function($http, $base64) {
        var authdata = $base64.encode('test:test');
        $http.defaults.headers.common['Authorization'] = 'Basic ' + authdata;
    }]);
    module.config(['$httpProvider', '$base64', function($httpProvider, $base64) {
        var authdata = $base64.encode('test:test');
        $httpProvider.defaults.headers.common['Authorization'] = 'Basic ' + authdata;
    }])
}();

它可以在 Safari 和模拟器中运行，但不能在 Chrome 和 Firefox 中运行

请帮我解决这个问题。提前致谢。

【问题讨论】：

CORS 标头不能由浏览器设置，而是由服务器设置：浏览器将首先发送一个 OPTIONS 请求以了解实际请求是否被授权。什么样的服务器正在监听52.74.68.202:8080/rest？看起来像 Tomcat 的？
您的服务器上是否启用了 CORS？您需要让 OPTIONS 预检请求具有访问权限。
@sp00m - 是的，它是 Tomcat，下面是响应头 Access-Control-Allow-Headers:Authorization,Content-Type,X-Token Access-Control-Allow-Methods:POST, PUT, GET、OPTIONS、DELETE Access-Control-Allow-Origin:* Access-Control-Expose-Headers:Message Access-Control-Max-Age:3600 Allow:GET、HEAD、POST、PUT、DELETE、TRACE、OPTIONS、PATCH Cache -Control:no-cache, no-store, max-age=0, must-revalidate Content-Length:0 Date:Tue, 12 Jul 2016 10:34:14 GMT Pragma:no-cache Server:Apache-Coyote/1.1 WWW-Authenticate:Basic realm="IntApp-Basic"
@DanielHigueras - 请查看我上面的评论。所有标题都添加到我的服务器中
@sp00m - 谢谢你是正确的。很大的帮助！谢谢大家帮助。我们终于能够解决它，这是因为服务器试图验证 OPTIONS 请求。

标签： angularjs xmlhttprequest

【解决方案1】：

由于您的服务器抛出 401，我猜它试图验证预检请求。来自https://stackoverflow.com/a/15734032/1225328：

W3 spec for CORS preflight requests 明确指出应排除用户凭据。

[...]

只需让服务器（本例中为 API）响应 OPTIONS 请求，无需身份验证。

【讨论】：