본문 바로가기

JavaScript/Node.js Lecture

8. Node.js cors

와! 효근이에요!

이번엔 Cross Origin. cors에 대해 배워보겠습니다.

당연히 모듈이 있어 쉽게 구현 가능하지만,

먼저 Cross Origin 에 대한 이론 설명부터 시작해야겠죠?

CORS

도메인 간에 자원을 공유 할 수 있는 권한을 갖도록,

브라우저에 추가 HTTP 헤더를 사용하는 것입니다.

쉽게 말해, 서버 ( url-a.com ), 웹 ( url-a.com , url-b.com ) 이 있으면

a 끼리는 권한이 있지만, url-b는 권한이 없어서, CORS 헤더를 설정해야 합니다.

서버와 웹의 도메인이 같지 않을 때, 추가해야 하는 헤더가 CORS입니다.

( 사진 출처 MDN )

종류

Simple / Preflight

Credential / Non-Credential

(Authentication. 즉 유저 정보를 확인하는 용도이며, 위의 두 개와 같이 쓰입니다)

Simple Request

다음 세 가지 조건을 모두 충족하면 Simple Request 로 분류됩니다.

  • GET, HEAD, POST 중 한 가지 방식.
  • POST 일 경우, 아래 조건 충족
    • application / x-www-form-urlencoded
    • multipart / form-data
    • text / plain
  • Custom header가 포함되지 않는다.

Simple Request 는 요청 한 번에 반환 한 번으로 처리 종료됩니다.

Simple Request 는 쉽게 말하면 저희가 쓰는

app.post('/',(req,res)=>{})

와 같은 것이고 res.send() 등 반환을 함으로써 통신이 종료됩니다.

req.body, multer, form-data 등이 여기에 해당됩니다.

Preflight Request

Simple Request 가 아닌 경우, Preflight Request로 분류됩니다.

Options Method 로 전송합니다 ( 메소드 = GET, POST 같은 것. )

간 보기 식의 예비 요청 같은 것이죠. 예비의 옵션이 허용되어야 본 요청을 받습니다.

왜 굳이 예비 요청을 보내는걸까요?

실제 요청이 전송하기에 안전한지를 결정하기 위해 예비 요청을 보내는 것입니다.

Access-Control- 계열의 Request Header 만 잘 정해주면,

예비 요청(Options) 과 본 요청(GET, POST, DELETE, PUT) 등은 서버가 알아서 처리해줍니다.

Request with Credential

통신에 Credential을 넣는 것입니다.

HTTP Cookie 와 HTTP Authentication 인증 정보를 인식 할 수 있게 해주는 요청이죠.

XHR 의 withCredentials 의 값을 true 로 주었을 때, 사용 가능하며, set-cookie라는 것을 사용할 수 있게 됩니다.

주의점은

  1. Access-Control-Allow-Origin 헤더의 값에 *이 없어야 함.
  2. 서버 측에서 Access-Control-Allow-Credentials : true 를 포함해야 함.
  3. 도메인이 구체적이어야 함.

등이 있겠네요.

Request without Credential ( Non-Credential )

Credential을 사용하지 않는 것이 Non-Credential입니다.

CORS 요청은 기본적으로 Non-Credential입니다.

바로 위에서 설명한 xhr.withCredentials 를 true 로 지정하지 않으면 자동으로 지정되죠.

설명이 많이 어렵죠?

보안 관련이라 중요합니다.

사용법

첫 문단에 "모듈" 이 있다고 했죠.

npm install cors
yarn add cors

모듈을 설치합니다.

app.use(cors())

cors를 use 메소드를 사용하여 미들웨어에 설정합니다.

옵션을 아무 것도 넣지 않았기에, 모든 곳에서의 요청이 허가됩니다.

app.use(cors({옵션}))

인자 값으로 옵션을 넣을 수 있습니다.

https://www.npmjs.com/package/cors

npm cors 에 대한 독스입니다.

이걸로 글을 마치겠습니다.

'JavaScript > Node.js Lecture' 카테고리의 다른 글

10. Node.js Mongodb를 사용한 게시판 (1)  (0) 2020.11.19
9. Node.js Multer 이미지 업로드  (0) 2020.11.19
7. Node.js Route, export  (0) 2020.11.19
6. Node.js To-Do List  (0) 2020.11.19
5. Node Promise  (0) 2020.11.16