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

Posted

技术标签:

【中文标题】XMLHttpRequest 无法加载 URL 无效的 HTTP 状态代码 401 AngularJs【英文标题】:XMLHttpRequest cannot load URL Invalid HTTP status code 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'
                    
                );
            
 ]);

【问题讨论】:

【参考方案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,如果这不起作用,请尝试从服务中发布来自控制器的请求

【讨论】:

以上是关于XMLHttpRequest 无法加载 URL 无效的 HTTP 状态代码 401 AngularJs的主要内容,如果未能解决你的问题,请参考以下文章

XMLHttpRequest 无法加载 [url] 预检响应具有无效的 HTTP 状态代码 405

XMLHttpRequest 无法加载 URL。 Access-Control-Allow-Origin 不允许的来源

XMLHttpRequest 无法加载 url Origin null is not allowed by Access-Control-Allow-Origin

无法通过 xmlhttprequest 加载本地 xml 文件

XMLHttpRequest 无法加载 <instagram OEMBED URL>。请求的资源上不存在“Access-Control-Allow-Origin”标头

XMLHttpRequest 无法为 instagram 加载