Question

我尝试使用angular.js和谷歌Chrome应用程序从API获取一些数据 - 高级休息客户端我测试了标题，它工作正常，我得到200响应，我可以看到数据，但是当我运行我的应用程序时，我收到以下错误：

拒绝设置不安全标头＆＃34;访问控制请求标头＆＃34; ionic.bundle.js：17607选项http://api.representemais.com.br/api/clientes 401（需要授权）（index）：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'
                    }
                });
            }
 }]);

Answer 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

Answer 2

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

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

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

2 个答案: