CORS (2018.06.24)

CORS : Cross Origin Resource Sharing

Script 내에서 다른 도메인에 리소스를 요청하는 Cross-Site HTTP Requests는 보안 상의 이유(Same Origin Policy)로 불가능했었는데, 이를 가능하게 하면서 만들어진 일종의 규약.

Simple Request

—GET, HEAD, POST 중의 한 가지 방식을 사용해야 한다.

— POST 방식일 경우 Content-type이 아래 셋 중의 하나여야 한다.

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

— 커스텀 헤더를 전송하지 말아야 한다.

Preflight Request

Simple Request에 해당하지 않으면 이 방식으로 요청.

1. 서버에 예비 요청(Preflight Request)을 보냄 → 서버의 응답
2. 서버에 본 요청(Actual Request)을 보냄 → 서버의 응답

My Problem

서버에 요청 시 Preflight Request에서 막힘

→ 서버측에서 Access-Control-Allow-Origin: *, Access-Control-Allow-Methods: OPTIONS …etc 를 지정하여 해결하려 했으나 문제가 고쳐지지 않음

→ webpack config devServer의 proxy설정을 바꾸고 난 후 문제 해결

config.devServer = {
	disableHostCheck: true,
	host: "0.0.0.0",
    publicPath: "/",
    historyApiFallback: true,
    proxy: {
      "/api/": {
      target: "__URL__",
      secure: false,
      logLevel: "silent"
    }
}

→ server와 local사이에 proxy Server를 두어 간접적으로(우회하여) sever에 접근한다!