2013-12-19 1 views
29

Я использую AngularJS v1.2.4.

у меня был проблема с Угловой отправкой предполетных Парам.вызов (Chrome показывал Парам.вызов как «отменено») и решил его:

$httpProvider.defaults.useXDomain = true; 
delete $httpProvider.defaults.headers.common['X-Requested-With']; 

что работало для всех моих звонков $ ресурсов, и все было хорошо.

Теперь я пытаюсь выполнить аутентификацию реализации и страницу входа, которая отправляет запрос POST на мой сервер с учетными данными пользователя. Я вижу проблему, с которой я столкнулся раньше, но вызовы $ resource все еще работают нормально.

Что действительно расстраивает то, что проблема происходит периодически; Я изменю несколько вариантов, связанных с заголовками, тогда он будет работать немного, и перестанет работать снова без изменения кода.

Мой сервер настроен для CORS и отлично работает с завитушками и другими клиентами REST. Вот пример:

curl -X OPTIONS -ik 'https://localhost:3001/authenticate' -H "Origin: https://localhost:8001" 
HTTP/1.1 200 OK 
content-type: application/json; charset=utf-8 
content-length: 2 
cache-control: no-cache 
access-control-allow-origin: * 
access-control-max-age: 86400 
access-control-allow-methods: GET, HEAD, POST, PUT, DELETE, OPTIONS 
access-control-allow-headers: Authorization, Content-Type, If-None-Match, Access-Control-Allow-Headers, Content-Type 
access-control-expose-headers: WWW-Authenticate, Server-Authorization 
set-cookie: session=Fe26.2**94705d49717d1273197ae86ce6661775627d7c6066547b757118c90c056e393b*2KYqhATojPoQhpB2OwhDwg*W9GsJjK-F-UPqIIHTBHHZx1RXipo0zvr97_LtTLMscRkKqLqr8H6WiGd2kczVwL5M25FBlB1su0JZllq2QB-9w**5510263d744a9d5dc879a89b314f6379d17a39610d70017d60acef01fa63ec10*pkC9zEOJTY_skGhb4corYRGkUNGJUr8m5O1US2YhaRE; Secure; Path=/ 
Date: Wed, 18 Dec 2013 23:35:56 GMT 
Connection: keep-alive 

Вот $ http.post вызов:

var authRequest = $http.post('https://' + $location.host() + ':3001/authenticate', {email: email, password: password}); 

Когда вызов из моего приложения работает, это как запрос OPTIONS выглядит следующим образом:

enter image description here

Когда это не сработает, это запрос ОПЦИИ:

enter image description here

Похоже, что отсутствует целая куча атрибутов заголовка. Кто-нибудь сталкивался с подобной проблемой?

Edit:

Просто чтобы прояснить, когда он не работает, запрос никогда не делает его на сервер - это мгновенно прерывается в браузере.

enter image description here

В Firebug, заголовки запроса являются:

OPTIONS /authenticate HTTP/1.1 
Host: localhost:3001 
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:25.0) Gecko/20100101 Firefox/25.0 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
Accept-Language: en-US,en;q=0.91,en-GB;q=0.82,fr-FR;q=0.73,fr;q=0.64,utf-8;q=0.55,utf;q=0.45,de-DE;q=0.36,de;q=0.27,en-sg;q=0.18,en-ca;q=0.09 
Accept-Encoding: gzip, deflate 
Origin: https://localhost:8001 
Access-Control-Request-Method: POST 
Access-Control-Request-Headers: content-type 
Proxy-Authorization: Basic cGF0cmljZUB6b25nLmNvbTpjaGFuZ2VtZQ== 
Connection: keep-alive 
Pragma: no-cache 
Cache-Control: no-cache 

enter image description here

Update:

Я устранил возможно проблемы с сервером, я думаю, , изменив хост на несуществующий сервер. Все еще видят то же поведение.

Вот код:

App.services.factory('AuthService', function ($http, $location, $q) { 

    var currentUser; 

    return { 
     authenticate: function (email, password) { 

      //promise to return 
      var deferred = $q.defer(); 

      var authRequest = $http.post('https://this.does.not.exist.com:3001/authenticate', {email: email, password: password}); 

      authRequest.success(function (data, status, header, config) { 
       currentUser = data; 
       console.log('currentUser in service set to:'); 
       console.log(currentUser); 
       //resolve promise 
       deferred.resolve(); 
      }); 

      authRequest.error(function (data, status, header, config) { 
       console.log('authentication error'); 
       console.log(status); 
       console.log(data); 
       console.log(header); 
       console.log(config); 

       //reject promise 
       deferred.reject('authentication failed..'); 
      }); 

      return deferred.promise; 
     }, 
     isAuthenticated: function() { 
      return currentUser !== undefined; 
     } 
    }; 
}); 

и HTTP Config:

App.config(['$httpProvider', function ($httpProvider) { 

    $httpProvider.defaults.useXDomain = true; 
    //$httpProvider.defaults.headers.common = {}; 

    console.log('logging out headers'); 
    console.log($httpProvider.defaults); 
    console.log($httpProvider.defaults.headers.common); 
    console.log($httpProvider.defaults.headers.post); 
    console.log($httpProvider.defaults.headers.put); 
    console.log($httpProvider.defaults.headers.patch); 
    console.log('end logging out headers'); 

    $httpProvider.defaults.headers.common = {Accept: "application/json, text/plain, */*"}; 
    $httpProvider.defaults.headers.post = {"Content-Type": "application/json;charset=utf-8"}; 

    console.log('after: logging out headers'); 
    console.log($httpProvider.defaults.headers.common); 
    console.log($httpProvider.defaults.headers.post); 
    console.log($httpProvider.defaults.headers.put); 
    console.log($httpProvider.defaults.headers.patch); 
    console.log('after: end logging out headers'); 

    $httpProvider.interceptors.push(function ($location, $injector) { 
     return { 
      'request': function (config) { 

       console.log('in request interceptor!'); 

       var path = $location.path(); 
       console.log('request: ' + path); 

       //injected manually to get around circular dependency problem. 
       var AuthService = $injector.get('AuthService'); 
       console.log(AuthService); 
       console.log(config); 

       if (!AuthService.isAuthenticated() && $location.path() != '/login') { 
        console.log('user is not logged in.'); 
        $location.path('/login'); 
       } 

       //add headers 
       console.log(config.headers); 
       return config; 
      } 
     }; 
    }); 
}]); 
+1

Вы уверены, что ваш скрипт/приложение не отправляет двойной запрос? sync (form submit) + асинхронный запрос к тому же URL-адресу? – asumaran

+0

@asumaran вы можете уточнить пожалуйста? Я уверен, что это всего лишь один запрос. – shaunlim

+0

Используйте firebug для отладки проблем CORS. Chrome имеет известную проблему и не отображает всю доступную информацию. https://code.google.com/p/chromium/issues/detail?id=269192&q=CORS&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Обновлен – TheSharpieOne

ответ

13

Это чувствует, как это может быть связано с тем, что вы поражая https конечную точку на вашем локальном хосте. Это означает, что вы, вероятно, используете какой-то самоподписанный сертификат SSL, что может означать, что Chrome считает это ненадежным.

Сначала я попытался перейти непосредственно к/authenticate конечной точке и посмотреть, дает ли Chrome предупреждение о ненадежном сертификате. Посмотрите, работает ли это предупреждение.

В противном случае, возможно, пока вы тестируете локально, вы можете поразить только конечную точку http и посмотреть, не решает ли это что-то?

+0

Эй, Майкл, спасибо за ответ! Проблема HTTPS может быть возможна, но я также получаю доступ к конечным точкам HTTPS (на том же сервере), используя объект $ resource в других частях моего приложения, и все выглядит нормально. В любом случае, я дам ваши предложения завтра утром. – shaunlim

+0

Я посетил конечную точку «/ authenticate» в Chrome, и не было предупреждения о ненадежном сертификате; Я, вероятно, принял его в какой-то момент до этого, когда я впервые начал разрабатывать приложение. – shaunlim

+0

Кроме того, он работает хорошо, когда я перехожу к вызову $ http.get и имеет соответствующую конечную точку GET/authenticate на сервере. – shaunlim

9

Огромное спасибо Майклу Коксу for pointing me in the right direction. Я принимаю его ответ, так как это привело меня к решению, но здесь больше деталей:

прогностического в вопросе HTTPS, я нашел:

Моя проблема был немного иным, хотя. Он по-прежнему не работал после того, как я выполнил инструкции по ссылкам выше. Я внимательно прочитал хром «ненадежное» сообщение, и это было похоже на «вы пытаетесь получить доступ к mylocalhost.com, но сервер представляет себя как».

Оказывается, что мой наспех созданный самостоятельно подписанный сертификат был «server.crt», когда оно должно быть «mylocalhost.crt»

7

Вы не можете иметь allow-credentials вместе с Access-Control-Allow-Origin: *.

Важное замечание: при ответе на доверенный запрос сервер должен указать домен и не может использовать wild carding.

Что касается запросов GET, им не нужен предварительный просмотр и т. Д., Если у них нет специальных заголовков.

Источник: Mozilla Developer Network. (Лучшая ссылка CORS в Интернете!)

Смежные вопросы