[JS] CORS

⏪ 과거,

과거에는 아무 client 나 서버에 데이터를 요청하고 데이터를 응답받을 수 있었다.

하지만 이러한 방식에 문제점이 있었다.

바로 보안 이슈인데 클라이언트가 서버에 토큰을 받고, 해커가 악성 스크립트가 담긴 메일 혹은 사이트를 클라이언트에게 넘기고 클라이언트가 그것을 받으면 해커가 토큰에 대한 정보를 통해 서버에 클라이언트처럼 접근이 가능할 수 있다는 것이다.

만약 은행 관련된 서버라면?

📵 SOP

(same origin policy)
⏤ 다른 출처의 리소스 사용을 제한하는 방식

이런 보안 이슈를 해결하기 위해 SOP 방식을 이용한다.
서버는 client 의 origin 을 확인하고 만약 다른 origin 이 있다면 이용을 제한한다.

💁🏼 Origin 출처란,

protocol + host + port 를 하나의 출처로 인식한다. port 번호가 하나라도 다르다면, 다른 출처로 인식하는데 port 를 신경쓰지 않는 브라우저도 존재한다. ( IE... )

👩‍💻 CORS

하지만 개발자들은 API 에 대한 요구가 많아졌고 보안 문제를 해결해주던 SOP 에 때문에 API 사용을 가로막히게 된다. 처음에는 jsonp 등으로 우회를 했지만, 이 우회에도 문제점이 존재하기 때문에 cross origin resource sharing을 사용하게 된다.

1. simple request
2. preflight
3. credentialed request

프론트엔드 개발자 입장에서는 (.. ) cors 문제에 직면하였을 때 js 로 해결하려하지 말고 cors가 무엇에 대한 문제인지 알고, (만약 해당 API 를 개발한 백엔드 개발자가 같은 회사라면) 백엔드 개발자에게 접근 권한을 열어달라고 하는 것이 제일 빠르지 않을까 🙄
혹은, 개발 서버에 proxy 설정해주는 방법도 존재한다..!

덕담 남길 수 있는 프로젝트에서 cors 문제가 발생하였다. (서버 port = 3000, 클라이언트 port = 8800)

npm install cors

cors 라이브러리를 설치해서, localhost:8080 이 아니라면, allow 하지 못하게끔 아래와 같이 해준다.

( server.js 파일 )

const cors = require('cors');
const app = express();

const whitelist = ['http://localhost:8080'];
const corsOption = {
  origin(origin, callback) {
    if (whitelist.indexOf(origin) !== -1) {
      callback(null, true);
    } else {
      callback(new Error('not allowed origin!'));
    }
  },
};

Reference |

velog , CORS를 처음 마주하는 분들에게
CORS는 왜 이렇게 우리를 힘들게 하는걸까?
youtube, [10분 테코톡] 🌳 나봄의 CORS