[Proxy] http 설정하기

🚩 Proxy

• 다른 도메인에서 api를 요청해서 쓰려면 cors설정이 필요함
• 실제 앱 운영중이면 서버와 연결된 db에는 라이브데이터가 쌓임
• 라이브데이터는 보안이 중요함. 따라서 모든 도메인이 아닌 특정 도메인을 허용하도록 구현해야 함.
• react라이브러리 쓰면 CORS정책을 우회할 수 있음.

🧩 Proxy사용법

1. package.json에서 proxy값 설정하기

...
"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
	"proxy" : "우회할 API 주소"
}

맨 밑에 작성해 금방 찾을 수 있게 한다.

export async function getAllfetch() {

    const response = await fetch('우회할 api주소/params');
    .then(() => {
			...
		})
}

export async function getAllfetch() {

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

기존에 fetch나 axios하던 부분에서 도메인부분 제거

2. React Proxy 사용법

• 수동으로 proxy 적용해야 하는 경우 사용
  1) http-proxy-middleware 라이브러리 설치
  `npm install http-proxy-middleware --save``
  2) React App 의 src파일 안에서 setupProxy.js파일 생성하고, 안에서 설치한 라이브러리 파일을 불러온 다음 작성

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

module.exports = function(app) {
  app.use(
    '/api', //proxy가 필요한 path prameter를 입력합니다.
    createProxyMiddleware({
      target: 'http://localhost:5000', //타겟이 되는 api url를 입력합니다.
      changeOrigin: true, //대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정하는 부분입니다.
    })
  );
};

3) 마찬가지로 도메인제거

export async function getAllfetch() {

    const response = await fetch('우회할 api주소/params');
    .then(() => {
			...
		})
}

export async function getAllfetch() {

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