오늘의 학습내용

CORS 에러

실제 서비스되는 앱의 데이터베이스(live data)의 보안을 위해 CORS 정책이 실행된다.
Proxy를 이용하여 이를 우회할 수 있다.

Proxy 사용법

webpack dev server proxy

• package.json에 proxy 설정 코드 추가

...
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
	"proxy" : "우회 API 주소" // proxy 설정 코드 추가
}

• fetch/axios 도메인 부분 제거

export async function getFetch() {

    const response = await fetch('/params');
    .then(() => {
			...
		})
}

React proxy

• http-proxy-middleware 설치

npm install http-proxy-middleware --save

• React App의 src 폴더에 setupProxy.js 파일 생성/설정

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

module.exports = function(app) {
  app.use(
    '/api', // 경로 입력
    createProxyMiddleware({
      target: 'http://localhost:5000', //타겟 api url
      changeOrigin: true, 
    })
  );
};

• fetch/axios 도메인 부분 제거

export async function getAllfetch() {

    const response = await fetch('/params');
    .then(() => {
			...
		})
}