Chapter1. CORS, SOP
SOP : 동일 출처 정책 (Same-Origin Policy) -> '같은 출처의 리소스만 공유 가능'
출처는
프로토콜 + 호스트 + 포트
하나라도 다르면 동일한 출처로 안본다
동일 출처 정책은 잠재적으로 해로울 수 있는 문서를 분리 -> 공격 받을 수 있는 경로가 줄어듦
근데 다른 출처의 리소스 사용해야하는데 어쩐담?
CORS = 교차 출처 리소스 (Cross-Origin Resource sharing)
추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
이 에러는 CORS 때문이 아니라, SOP 때문이고 CORS는 오히려 이 에러를 해결해 줄 수 있는 방안
CORS의 동작 방식
- 프리플라이트 요청 (Preflight Request)
실제 요청을 보내기 전, OPTIONS 메서드로 사전 요청을 보내 해당 출처 리소스에 접근 권한이 있는지부터 확인하는 것 - 단순 요청 (Simple Request)
특정 조건이 만족되면 프리플라이트 요청을 생략하고 요청을 보내는 것 - 인증정보를 포함한 요청 (Credentialed Request)
요청 헤더에 인증 정보를 담아 보내는 요청. 출처가 다를 경우에는 별도의 설정을 하지 않으면 쿠키를 보낼 수 없음. 민감한 정보이기 때문에 이 경우에는 클라이언트, 서버 양측 모두 CORS 설정이 필요
Chapter2-1. Express
Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 인기 있는 프레임워크
Express의 주요 기능으로는 라우팅, 미들웨어, HTTP 요청 및 응답, 템플릿 엔진 지원, 데이터베이스 연동 등이 있다. 라우팅 기능은 URL 경로에 따라 적절한 핸들러 함수를 호출하는 역할을 한다. 미들웨어는 HTTP 요청과 응답을 처리하는 함수로, 요청을 처리하고 응답을 생성하며, 다음 미들웨어로 요청과 응답을 전달하는 역할을 한다. 또한, 템플릿 엔진을 통해 HTML 문서를 동적으로 생성할 수 있다.
//응답으로 'Hello World!'를 보내는 Express 서버 코드
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})//Express로 라우팅을 구현한 코드
const router = express.Router()
router.get('/lower', (req, res) => {
res.send(data);
})
router.post('/lower', (req, res) => {
// do something
})Chapter2-2. Middleware
미들웨어(Middleware)는 자동차 공장의 공정과 비슷하다. 컨베이어 벨트 위에 올라가 있는 요청(Request)에 필요한 기능을 더하거나, 문제가 발견된 불량품을 밖으로 걷어내는 역할을 한다. 미들웨어는 express의 가장 큰 장점이라고 할 수 있다.
미들웨어를 사용하는 상황
1. POST 요청 등에 포함된 body(payload)를 구조화할 때(쉽게 얻어내고자 할 때)
2. 모든 요청/응답에 CORS 헤더를 붙여야 할 때
3. 모든 요청에 대해 url이나 메서드를 확인할 때
4. 요청 헤더에 사용자 인증 정보가 담겨있는지 확인할 때
