[Security] Same-Origin-Policy & Cross-Origin-Resource-Sharing

[Security] Same-Origin-Policy & Cross-Origin-Resource-Sharing

ajax 호출할때 자주만나는 에러이다.

protocol / host / port가 모두 일치해야 한다.

일치하지 않는 리소스 요청은 브라우저에서 제한하고 있다.

요즘 트렌드인 SPA(Single Page Application)에서는

View 서버와 Restful API 서버을 따로 두는게 추세이므로 다를 수 있다.

최근 react-create-app 으로 제작한 smart-book에서 같은 port로 

API 서버를 같이 두기 어려워서 API 서버를 port만 다르게 따로 만들었다...

이 문제를 해결하기 위해서 여러가지 방법이 있는데,

그중에 하나가 서버쪽에 response header 값에 Access-Control-Allow-Origin: * 를 주는 것이다.

이렇게 하면 모든 곳의 요청에 대해서 풀어주는 격이므로, 보안을 위해서 우리는 특정도메인으로 한정해야 한다.

보안이슈가 아니더라도, 두가지 서버의 세션을 공유하기 위해서는 withCredential: true 로 주어야 하는데, 

`*`로 주게되면 withCredential을 줄 수 없다.

따라서 우리는 웬만하면, Access-Control-Allow-Origin: http://A.com, http://B.com, ... 으로 특정 도메인만 적용하자.

자세한 적용방법은 아래 출처를 참고하면된다.

[출처]

https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

http://guswnsxodlf.github.io/enable-CORS-on-express