예전에 spa방식으로 개발하였었고
클라이언트 서버 포트 연결을 cors 미들웨어를 설치해 주어 해결하였다.
그때는 cors 미들웨어가 왜 필요한건지 자세히 모르고 지나갔었는데 최근 다시금 상기하게 되었다.
SPA란
- single page application
일반페이지의 경우 client/web browser(프론트) 가 server(백엔드)에게 html,css,js등 화면에 보여줄 데이터를 요청하고, 서버는 요청된 화면을 client에게 뿌려주는 방식
spa는 앱 안에 html,css,js등 모든 정보가 이미 내장되어 있는 상태로, 새로운 데이터가 필요할때만 서버 api를 호출하여 필요한 정보를 불러와 화면에 보여주는 식
CORS란?
- cross origin resource sharing
웹 브라우저에서 외부 도메인 서버와 통신하기 위한 방식을 표준화한 스펙.
서버와 클라이언트가 정해진 헤더를 통해 서로 요청이나 응답에 반응할 지 결정하는 방식.
동일 출처 정책(same-origin policy) 때문에 CORS 같은 상황이 발생 하면 외부서버에 요청한 데이터를 브라우저에서 보안목적으로 차단한다.
localhost:3000 에서 react를 실행하였었고 서버는 localhost:8000번에서 실행하고 있었기 때문에 포트가 달라 CORS가 발생할 수 있는 상황
서버와 클라이언트가 같은 포트를 사용하게 하여 해결할 수 있지만 SPA(Single Page Application)을 이용하여 개발하고 있기 때문에 서버에서 cross-origin HTTP 요청을 허가 해 주는 것이 좋다.
app.get('/data',(req,res) => {
res.header("Access-Control-Allow-Origin","*");
res.send(data);
});-> 이런식으로 모든 rest.api 응답에 일일이 추가해 주기는 힘들기 때문에
node.js의 미들웨어 CORS 추가를 해 주었던 것
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors()); //CORS 미들웨어 추가위처럼 미들웨어를 설정하면 모든 요청에 대해 허가를 하게 되는것이다.
보안적으로 문제가 발생할 수 있음!
const corsOptions = {
origin:'http://localhost:3000',
credentials: true,
};
app.use(cors(corsOptions));//config추가Request headers(클라이언트의 요청 헤더)
origin: 요청을 보내는 페이지의 출처(도메인)
Access-Control-Request-Method: 실제 요청하려는 메서드
Access-Control-Request-Headers: 실제 요청에 포함되어 있는 헤더 이름
Responses headrs(서버에서의 응답 헤더)
Access-Control-Allow-Origin: 요청을 허용하는 출처. *이면 모든 곳에 공개되어 있음을 의미
Access-Control-Allow-Credentials: 클라이언트 요청이 쿠키를 통해서 자격 증명을 해야 하는 경우 true(true를 응답받은 클라이언트는 실제 요청시 서버에서 정의된 규격의 인증값이 담긴 쿠키를 같이 보내야 한다.)
Access-Control-Expose-Headers: 클라이언트 요청에 포함되어도 되는 사용자 정의 헤더
Access-Control-Max-Age: 클라이언트에서 preflight의 요청 결과를 저장할 기간을 지정. 클라이언트에서 preflight요청의 결과를 저장하고 있을 시간. 해당 시간동안은 preflight요청을 다시 하지 않게 됨
Access-Cotrol-Allow-Methods: 요청을 허용하는 메서드
기본값은 GET, POST
이 해더가 없으면 GET, POST 요청만 가능
만약 이 해더가 지정이 되어 있으면, 클라이언트에서는 헤더값에 해당하는 메서드 일 경우에만 실제 요청을 시도하게 된다.
Access-Control-Allow-Headers: 요청을 허용하는 헤더
