XMLHttpRequest 无法加载 URL 无效的 HTTP 状态代码 401 AngularJs答案

【问题标题】：XMLHttpRequest cannot load URL Invalid HTTP status code 401 AngularJsXMLHttpRequest 无法加载 URL 无效的 HTTP 状态代码 401 AngularJs
【发布时间】：2015-04-15 18:42:03
【问题描述】：

我正在尝试使用 angular.js 和 google chrome 应用程序从 API 获取一些数据 - Advanced Rest Client 我测试了标头，它工作正常，我得到 200 响应，我可以看到数据，但是当我运行我的应用程序时，出现以下错误：

拒绝设置不安全的标头“Access-Control-Request-Headers” ionic.bundle.js:17607 选项http://api.representemais.com.br/api/clientes 401（需要授权）（索引）：1 XMLHttpRequest 无法加载 http://api.representemais.com.br/api/clientes。 HTTP 状态码 401 无效

angular.module('starter.services', [])

    /* CATEGORIES */
    .factory('ServiceClientes', ['$http', function ($http) {

        var endpoint = 'http://api.repmais.com/api/clients';

        var token = "99KI9Gj68CgCf70deM22Ka64chef2C40Gm2lFJ2J0G9JkD0bFAcbFfd19MfacGf3FFm8CM1hG0eDiIk8";
        var credencial = "rm@w.com.br:cd87cd5ef753a06ee79fc75ds7cfe66c";
        var origem = "mobile";


        return {

            getAll: function () {
                return $http.get(endpoint, {
                    headers: {

                    'X-API-TOKEN': token,
                    'X-API-CREDENCIAL': credencial,
                    'X-API-ORIGEM': origem,
                    'Access-Control-Allow-Methods' : 'POST, GET, OPTIONS, PUT',
                    'Access-Control-Allow-Origin' : 'http://localhost:8100',
                    'Access-Control-Allow-Credentials': true,
                    'Access-Control-Request-Headers': 'X-Requested-With, accept, content-type',
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                    }
                });
            }
 }]);

【问题讨论】：

标签： javascript angularjs rest cors restful-authentication

【解决方案1】：

您正在尝试手动设置应该由浏览器设置的标题。

上述标头由用户代理控制，以使其控制传输的这些方面。这在一定程度上保证了数据的完整性。

https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html#dom-xmlhttprequest-setrequestheader

此外，Access-Control-Allow 标头应该由服务器使用。你可以在这里读更多关于它的内容： https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

【讨论】：

【解决方案2】：

 $httpProvider.defaults.headers.common = {};
  $httpProvider.defaults.headers.post = {};
  $httpProvider.defaults.headers.put = {};
  $httpProvider.defaults.headers.patch = {};

将其添加到您的 app.config，如果这不起作用，请尝试从服务中发布来自控制器的请求

【讨论】：