SOP란?

■ SOP (Same Origin Policy) 의 개념

한 Origin으로 부터 로드된 Document 또는 Script가 다른 Origin의 리소스와 상호작용 할 수 있는 방법을 제한하는 중요한 보안 메커니즘

Document 내에서 외부 리소스와 상호작용 할때 리소스의 origin이 document의 origin과 다른 경우에 제한을 두는 정책

 

■ Origin : Document 의 출신 표시

 

https://javannspring.tistory.com:443

scheme      host                      port

 

세가지 모두 같아야 Same Origin으로 본다

 

 

출처 : evan-moon.github.io/2020/05/21/about-cors/

CORS는 왜 이렇게 우리를 힘들게 하는걸까?

● 서버에서 Access-Control-Allow-Origin : * 설정

● 브라우저에서 요청을 보낼시 credential : include 로 설정할 경우에는 위의 정책을 함께 쓸 수 없음

이경우 Access-Control-Allow-Origin 에는 명시적 URL이 들어가야하며

응답시 Access-Control-Allow-Credentials : true 가 존재해야 한다.

 

 

■ 우회방법

웹팩 webpack-dev-server 라이브러리에서 제공하는 프록시 기능을 사용하여 CORS 정책을 우회

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://apiserver.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    }
  }
}

이렇게 하면 브라우저 localhost에서는 localhost:8080/api 로 보낸줄 알지만

porxy를 태워 https://apiserver.com/api 로 보내게 된다

( 내부적으로는 http-proxy-middleware 사용 )

 

함께 보면 좋을듯

(+)

youtu.be/6QV_JpabO7g