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: * 의 경우 모든 도메인의 요청을 허용
- Express에 cors 모듈 설치 (cors 미들웨어)
1) npm i cors
2) index.js에 추가... const app = express(); const cors = require('cors'); const corsOption = { origin: '허용하고자 하는 도메인' }; app.use(cors(corsOption)); ...
- response 헤더 Access-Control-Allow-Origin 에 해당 도메인 추가 완료.