React - proxy/cors

gongyoon·2022년 6월 2일
0

react

목록 보기
1/1
post-thumbnail

React 개발 환경에서 react 주소는 http://localhost:3000, node 주소는 http://localhost:5000인데
api를 요청할 경우 SOP라는 동일한 프로토콜, 호스트, 포트의 Origin에 요청된 자원만 응답이 가능한 정책이 있어
CORS라는 공유 출처 자원 정책 방법을 알아보았다.

클라이언트 : 1. http-proxy-middleware (로컬환경 한정)
1) npm i http-proxy-middleware
2) /src/setupProxy.js 생성

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

3) api 호출
endpoint로 /movies로 호출시 http://localhost:5000/movies로 가게 된다.

클라이언트 : 2. package.json 에 proxy 추가
1) CRA로 제작된 프로젝트에만 적용 가능 (create-react-app)
2) package.json에 proxy 추가

// package.json

{
  proxy: 'http://localhost:5000'
}

서버 : 3. 헤더에 Access-Control-Allow-Origin 세팅하기

cosnt express = require('express');
const app = express();

app.get('/api', (req, res) => {
	res.header("Access-Control-Allow-origin", "허용하고자 하는 도메인");
    res.send(data);

Access-Control-Allow-Origin: * 의 경우 모든 도메인의 요청을 허용

  1. Express에 cors 모듈 설치 (cors 미들웨어)
    1) npm i cors
    2) index.js에 추가
...
const app = express();
const cors = require('cors');

const corsOption = {
	origin: '허용하고자 하는 도메인'	
};

app.use(cors(corsOption));
...
  1. response 헤더 Access-Control-Allow-Origin 에 해당 도메인 추가 완료.
profile
공부하며 성장하는 사람이 되고 싶은 개발자.

0개의 댓글