lite-server가있는 Angular2는 사용자 정의 헤더 또는 쿠키를 첨부하지 않습니다.

Question

사용자가 로그인 할 때 쿠키를 발행하는 localhost : 8080에서 실행되는 REST 백엔드가 있습니다. 백엔드에 Angular2 프런트 엔드가 패키지되어 있습니다. 프로젝트를 실행하면 angular가 쿠키를 보내고 사용자 정의 헤더를 백엔드에 대한 요청에 연결합니다. 그러나 목록 서버 one localhost : 3000을 사용하여 프런트 엔드를 실행하면 각도가 쿠키를 보내지 않고 사용자 지정 헤더를 첨부하지 않습니다. 백엔드 실행

요청 :

Accept:application/json, text/plain, */* 
Accept-Encoding:gzip, deflate, sdch, br 
Accept-Language:en-US,en;q=0.8 
Connection:keep-alive 
Cookie:io=8Dk6ajOQZyDz-bvXAAAB; jwt=eyJh...H1aCccT2U 
Host:localhost:8080 
Referer:http://localhost:8080/ 
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.76 Safari/537.36 
X-CSRF-Token:2c8744ff-38ad-49cb-bf07-fe75cd16f827 

는 내가 읽은 바로는 라이트 서버와 아파치

Accept:*/* 
Accept-Encoding:gzip, deflate, sdch, br 
Accept-Language:en-US,en;q=0.8 
Access-Control-Request-Headers:x-csrf-token 
Access-Control-Request-Method:GET 
Connection:keep-alive 
Host:localhost:8080 
Origin:http://localhost:3000 
Referer:http://localhost:3000/ 
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.76 Safari/537.36 

으로 실행하면, 쿠키는 특정 포트 수 없습니다, 따라서해야한다 localhost : 3000 및 localhost : 8080의 요청으로 보냈습니다.

모든 출처의 모든 요청을 수락하기 위해 백엔드에 CORS 필터가 있습니다.

1. 헤더가 첨부되지 않는 이유는 무엇입니까?
2. 왜 쿠키가 첨부되지 않습니까?

Answer 1

문제는 lite-server와 관련이 없습니다. 백엔드와 다른 포트/도메인에서 프론트 엔드를 실행할 때마다 쿠키 설정이나 헤더 읽기 허용과 같은 특정 동작을 명시 적으로 허용해야합니다.

백엔드에서 설정 한 쿠키를 브라우저에 저장하려면 각도 요청을 withCredentials과 함께 보내야합니다.이 요청은 다음 헤더를 요청에 첨부합니다.

Access-Control-Allow-Credentials:true 

this.http.post(this.loginUrl, 
     JSON.stringify({ username: username, password: password }), 
     {headers: this.headers, withCredentials: true})... 

각 요청에이를 첨부하는 HTTP 서비스 래퍼를 설정했습니다.

Access-Control-Expose-Headers:X-CUSTOM-HEADER 

만 다음이 각도에 노출됩니다 백 엔드가 보낸 사용자 정의 헤더를 읽는 각도를 들면

는 CORS는 다음 헤더를 보낼 필요가있다. 희망이 사람을 도움이됩니다.