angularjs를 사용하는 CORS 문제 $ http

CORS 요청에서 angularjs $ http를 사용하면 my success 함수 authenticateSuccess (data, status, headers)가 잘못된 헤더를 얻을 때 문제가 발생합니다. 우리가 알고 있듯이 모든 CORS 요청은 angularjs에서 두 번 발생합니다. 서버에서 두 번 응답합니다. 처음에는 유효성 검사 정보가 필요하고 두 번째 응답은 필요하지만 내 성공 함수는 첫 번째 응답에서 헤더를 가져옵니다. 그러나 데이터는 두 번째 응답에서 온 것입니다.

function login(credentials) { 

     var data = { 
      username: credentials.username, 
      password: credentials.password, 
      rememberMe: credentials.rememberMe 
     }; 
     console.log(data); 
     return $http.post('//localhost:8080/api/authenticate', data).success(authenticateSuccess); 

     function authenticateSuccess(data, status, headers) { 
      console.log(headers()); 
      console.log(data); 
      var bearerToken = headers('Authorization'); 
      if (angular.isDefined(bearerToken) && bearerToken.slice(0, 7) === 'Bearer ') { 
       var jwt = bearerToken.slice(7, bearerToken.length); 
       service.storeAuthenticationToken(jwt, credentials.rememberMe); 
       return jwt; 
      } 
     } 
    }

출처

2016-07-27 卢俊星

'$ http''.success' 처리기는 더 이상 사용되지 않습니다. 대신'.then'을 사용하십시오. https://docs.angularjs.org/api/ng/service/$http#deprecation-notice – Phil

예, 저는 이것을 사용하여 변경했습니다. 하지만 같은 문제가 생기면 머리글은 첫 번째 응답에서 가져온 것이고 데이터는 두 번째 응답에서 가져온 것입니다. –

당신은 백엔드에서 헤더와 일치하지 않습니다 전송하는 헤더로이 문제를 얻고있다

그래서) (당신이 보내는 헤더

contentHeaders = 새로운 헤더를 프론트 엔드에서 가정하자; contentHeaders.append ('Authorization', 'your token'); contentHeaders.append ('Content-Type', 'application/json'); contentHeaders.append ('액세스 제어 허용 원본', '*');

'권한 부여', 'Content-type', 'Access-Control-Allow-Origin'과 같은 헤더는 백엔드에서 사용할 수있는 헤더와 일치해야합니다.

그래서 백엔드에 위의 모든 헤더

res.header ("액세스 제어 - 허용 - 기원", "*") 아래를 참조해야한다 '액세스 제어는-헤더를 허용'; res.header ("액세스 제어 허용 헤더", "권한 부여, 컨텐트 유형, 액세스 제어 허용 원점");

그래서 여기서는 Access-Control-Allow-Headers에서 프론트 엔드에서 보낸 모든 헤더 ('인증', '내용 유형', '액세스 제어 허용 원점')을 전달해야합니다.

위의 개념을 사용하면 완벽하게 작동합니다.

감사합니다.

출처

2017-06-07 16:12:21

angularjs를 사용하는 CORS 문제 $ http

답변

관련 문제