.htaccess 설정으로 CORS 에러 제거하기.

Angular 는 SPA 방식이므로, 단순하게 index.html 파일이 열리고 앵귤러로 만들어진 Javascript 파일만 다운로드 되고나면, 웹앱이 돌아가기 시작한다. 그래서 서버 비용도 아낄 겸 FindBM.com 을 개발할 때 초기에는 S3-static web hosting 을 이용해 서버리스로 구성하고, API 서버는 기존의 서버를 이용했었다.    

상황 

1. 도메인 FindBM.com 은 S3 스태틱 웹호스팅을 이용했다. (서버리스) 

2. 필요한 데이터 통신을 위한 API 서버는, 기존에 사용하던 (다른 앱 서비스를 위해 돌리던) API 웹서버를 이용하기로 했다.

그랬더니, 도메인이 다르기 때문에 CORS 크로스 오리진 에러가 나는것이다. 

일반 네이티브 앱에서 API 통신을 할 때는, 일반 Request 를 해서 문제가 없었는데, 브라우저에서 Javascript 내부에서 통신하는 것은 보안 문제가 있기 때문에 도메인이 다르면, CORS 에러가 난다는것이다. 

해결

- API 서버의 .htaccess 를 수정해서 cross origin 에 안걸리도록 수정을 해줬다.

Header set Access-Control-Allow-Origin "findbm.com"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

- Access-Control-Allow-Origin 에는 특정 도메인이 접근가능하도록 설정해 둘 수 있다. 와일드카드(*)를 이용해서 어디서든 접근가능하게 할 수도 있겠지만, 써드파티앱을 지원하기전엔, 보안상 문제가 있을 수 있기 때문에 특정 도메인을 지정해 주어야겠다.

덕분에 Pre-Flight 통신 개념도 알게되고 정말 공부 많이 했다.

...

그런데 다른 이유 때문에,

결국엔 그냥 Findbm.com 위한 서버를 하나 더 돌려서 쓸데없는 일이 되어버렸다. ㅋ