와! 효근이에요!
이번엔 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라는 것을 사용할 수 있게 됩니다.
주의점은
- Access-Control-Allow-Origin 헤더의 값에 *이 없어야 함.
- 서버 측에서 Access-Control-Allow-Credentials : true 를 포함해야 함.
- 도메인이 구체적이어야 함.
등이 있겠네요.
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 |