[Tech] CORS (Cross-origin Resource Sharing) 정책

CORS?

 개발을 하다 보면 쉽게 접하게 되는 CORS에 대해서 한번 정리해보고자 한다. 그렇다면 먼저 CORS란 무엇일까? CORS는 Cross-Origin Resource Sharing의 줄임말로, 직역하면 교차 출처 리소스 공유이다.

 교차 출처 리소스 공유라는 말은 쉽게 와닿지 않는다. 쉽게 말해, 내가 가지고 있는 모자를 친구가 빌린다고 했을 때, 내가 알겠다고 하는 느낌으로 생각하면 될 것 같다.

그렇다면, 출처(Origin)란 무엇일까?

 서버의 위치를 뜻하는 URL들은 여러 개의 구성 요소로 이루어져 있는데, 이중에 sheme(protocol), host(domain), port로 구성되어있는 것이 출처이다.

 예를들어, https://aosjehdgus.tistory.com/라는 주소가 있다고 하면 protocol 은 https, host는 aosjehdgus.tistory.com, port: 443이다.

그런데 이 정책이 왜 필요한 것일까?

 위의 예시로 이어서 들자면 내 모자를 친구가 나 몰래 쓰고서 돌려놓거나, 훔쳐가면 어떨지에 대해 생각하면 될 것 같다.

 이와 마찬가지로 다른 출처의 어플리케이션이 서로 통신하는 것에 대해 아무런 제약도 존재하지 않는다면 악의를 가진 사람들에 의해 나도 모르게 정보를 탈취당할 수도 있기 때문에 필요한 것이다.

 CORS는 필요하고 우리가 개발하면서 CORS를 마주하는 상황들은 답답할 수도 있지만 우리의 데이터를 잘 보호해주고 있다고 생각하면 된다. 따라서, 내가 허용한 범주 안에서만 resource 를 공유할 수 있도록 설정하는 것이 필요하다.

먼저 server side에서 세팅하는 방식을 살펴 보면 아래와 같다.

Access-Control-Allow-Origin 응답 헤더 세팅

 서버측 응답에서 접근 권한을 주는 헤더를 추가하는 방식이 있다. 이 방식 중에 모든 도메인에 설정하는 것보다, 내가 허용한 도메인만 접근할 수 있도록 하는 것이 안전하다.

// 모든 도메인
"Access-Control-Allow-Origin", "*"
// 특정 도메인
"Access-Control-Allow-Origin", "<https://example.com>"

cors 모듈 사용

 이 모듈도 마찬가지로 아무 옵션 없이 설정하게 되면 모든 cross-origin 요청에 대한 응답이므로, 특정 도메인이나 특정 요청에만 응답하게 옵션을 설정하는 것이 좋다.

• 특정 도메인 접근 허용

const cors = require("cors"); 
const app = express(); 
const options = { 
	origin: "<http://example.com>", 
    credentials: true, 
    optionsSuccessStatus: 200, 
}; 
app.use(cors(options));

• 특정 요청 접근 허용

const cors = require("cors"); 
const app = express(); 
app.get("/example/:id", cors(), function (req, res, next) { 
	res.json({ msg: "example" }); 
}

Client side에서 설정해주는 방식은 아래와 같다.

webpack-dev-server proxy 기능

 react 웹팩의 devServer의 proxy 설정을 통해 서버에서 따로 설정하지 않고 해결할 수도 있다. 아래와 같이 프록시 속성을 설정하면, 서버에서 해당 요청을 받아준다.

 설정 값들을 넣을 때 port와 proxy 안의 값들에 오타가 없는지 꼭 유의해야 한다.

module.exports = {
  devServer: {
        port: 1234,
    proxy: {
      "/api": {
        target: `http://localhost:3000,
        changeOrigin: true,
      },
    },
  },
};