HttpClient.jsonp 와 HttpInterceptor의 충돌

외부 서버에 HTTP 요청이 필요한 상황에서 CORS 문제로 접근이 제한된다면 HttpClient의 jsonp로 API 호출을 할 수가 있다.

 

우선 내가 겪은 상황에 대해 설명하자면, jsonp로 HTTP 요청을 보내면 "jsonp는 HttpRequest Header를 포함할 수 없습니다??"와 비슷한 문구의 에러 메시지를 출력해준다.

 

Angular에서 제공하는 HTTP_INTERCEPTORS에 의해 HTTP와 관련된 로직들이 HTTP Request 중간에 가로채지며 발생한 문제였다.

 

HTTP_INTERCEPTORS가 모든 HTTP 요청을 중간에 가로채어 request header에 특정 값들을 세팅해주고 있었고, 위에서 언급한 "httpRequest Header를 포함할 수 없습니다"가 출력된 것이다. 즉 말 그대로 HttpRequest Header를 포함시켜 Request를 날리고 있어서 그랬던 문제.

 

HTTP_INTERCEPTORS는 root 모듈 providers에 의해 전역으로 관리되고 있었다.

 

결론적으로는 HTTP_INTERCEPTORS를 담고 잇는 intercepter.ts 파일에서 request가 "JSONP"인 것만 if문으로 분기처리해 skip하도록 했다.

 

아직 정확히는 모르나, 이렇게 서버에서 서버로 데이터를 요청하는 상황에서 "intercept"한다라는 개념이 존재한다는 것을 처음 알았다. (중간에서 무엇을 한다라는 맹락에서 middleware와 비슷한 것 같다.)