이중 하나라도 다르면 동일한 출처로 보지 않음
ex)
동일하지 않은 프로토콜 : https://www.codestates.com
vs http://www.codestates.com
동일하지 않은 호스트: https://urclass.codestates.com
vs https://codestates.com
동일하지 않은 포트 : http://codestates.com:81
vs http://codestates.com
동일한 포트(https 프로토콜의 기본포트는 443): https://codestates.com:443
vs https://codestates.com
실제 요청을 보내기 전, OPTIONS 메서드로 사전 요청을 보내 해당 출처 리소스에 접근 권한이 있는지부터 확인하는 것
<요청 보낸 출처가 접근권한이 없는 경우>
특정 조건이 만족되면 프리플라이트 요청을 생략하고 요청 보내는 것
GET
, HEAD
, POST
요청 중 하나여야 함 Accept
, Accept-Language
, Content-Language
, Content-Type
헤더의 값만 수동으로 설정application/x-www-form-urlencoded
, multipart/form-data
, text/plain
값만 허용요청 헤더에 인증정보를 담아보내는 요청. 민감한 정보이므로 출처가 다를 경우 별도의 설정을 하지 않으면 쿠키를 보낼 수 없음. 이 경우 프론트, 서버 양측 모두 CORS 설정 필요
const http = require('http'); // const server = http.createServer((request, response) => { // 모든 도메인 response.setHeader("Access-Control-Allow-Origin", "*"); // // 특정 도메인 response.setHeader("Access-Control-Allow-Origin", "https://codestates.com"); // // 인증 정보를 포함한 요청을 받을 경우 response.setHeader("Access-Control-Allow-Credentials", "true"); })
const cors = require("cors"); const app = express(); // //모든 도메인 app.use(cors()); // //특정 도메인 const options = { origin: "https://codestates.com", // 접근 권한을 부여하는 도메인 credentials: true, // 응답 헤더에 Access-Control-Allow-Credentials 추가 optionsSuccessStatus: 200, // 응답 상태 200으로 설정 }; // app.use(cors(options)); // //특정 요청 app.get("/example/:id", cors(), function (req, res, next) { res.json({ msg: "example" }); });
Express: Node.js 환경에서 웹서버 또는 API서버를 제작하기 위해 사용되는 인기있는 프레임워크
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}`) })
const requestHandler = (req, res) => { if(req.url === '/lower') { if (req.method === 'GET') { res.end(data) } else if (req.method === 'POST') { req.on('data', (req, res) => { // do something ... }) } } }
const router = express.Router() // router.get('/lower', (req, res) => { res.send(data); }) // router.post('/lower', (req, res) => { // do something })
Node.js로 HTTP 요청 body를 받는 코드
let body = []; request.on('data', (chunk) => { body.push(chunk); }).on('end', () => { body = Buffer.concat(body).toString(); // body 변수에는 문자열 형태로 payload가 담겨져 있습니다. });
body-parser를 미들웨어로 이용한 코드 (npm install body-parser)
const bodyParser = require('body-parser'); const jsonParser = bodyParser.json(); // 생략 app.post('/users', jsonParser, function (req, res) { // })
express.json()을 이용한 코드
const jsonParser = express.json(); // 생략 app.post('/api/users', jsonParser, function (req, res) { })
Node.js에 CORS를 적용하는 예시
const defaultCorsHeader = { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS', 'Access-Control-Allow-Headers': 'Content-Type, Accept', 'Access-Control-Max-Age': 10 }; // 생략 if (req.method === 'OPTIONS') { res.writeHead(201, defaultCorsHeader); res.end() }
모든 요청에 대해 CORS 허용
const cors = require('cors'); // 생략 app.use(cors());
특정 요청에 대해 CORS 허용
const cors = require('cors') // 생략 app.get('/products/:id', cors(), function (req, res, next) { res.json({msg: 'This is CORS-enabled for a Single Route'}) })
use메서드 이용하여 모든 요청에 대해 미들웨어 적용
const express = require('express'); const app = express(); // const myLogger = function (req, res, next) { console.log('LOGGED'); next(); }; // app.use(myLogger); // app.get('/', function (req, res) { res.send('Hello World!'); }); // app.listen(3000);
토큰을 통해 로그인 여부 확인하는 미들웨어
app.use((req, res, next) => { // 토큰이 있는지 확인, 없으면 받아줄 수 없음. if(req.headers.token){ req.isLoggedIn = true; next(); } else { res.status(400).send('invalid user') } })