개발 모드에서 API 요청할 때 프록시 설정하기 Proxying API Requests in Development

 

Proxying API Requests in Development | Create React App

* 참고: 이 기능은 react-scripts@0.2.3 이상에서 사용할 수 있습니다.

---

사람들은 종종 백엔드 구현과 동일한 호스트 및 포트에서 프런트 엔드 React 앱을 제공합니다.

예를 들어 앱이 배포된 후 프로덕션 설정은 다음과 같을 수 있습니다.

/             - static server returns index.html with React app
/todos        - static server returns index.html with React app
/api/todos    - server handles any /api/* requests using the backend implementation

이와 같은 설정이 있으면 개발 중에 다른 호스트나 포트로 리디렉션할 염려 없이 fetch('/api/todos')와 같은 요청을 작성하는 것이 편리합니다.

개발 중인 API 서버에 알 수 없는 요청을 프록시하도록 개발 서버에 지시하려면 다음과 같이 package.json에 프록시 필드를 추가합니다.

 "proxy": "http://localhost:4000",

이렇게 하면 개발 중에 fetch('/api/todos')할 때 개발 서버가 정적 자산이 아님을 인식하고 http://localhost:4000/api/todos에 대한 요청을 폴백으로 프록시합니다. 개발 서버는 Accept 헤더에 text/html이 없는 요청만 프록시로 보내려고 시도합니다.

편리하게도 이렇게 하면 개발 시 CORS 문제 및 오류 메시지를 피할 수 있습니다.

Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

프록시는 개발 모드(npm start 사용)에만 영향을 미치며 /api/todos와 같은 URL이 프로덕션 모드에서 올바른 항목을 가리키는지 확인하는 것은 사용자의 책임입니다.

/api 접두사를 사용할 필요가 없습니다. text/html 수락 헤더가 없는 인식되지 않은 요청은 지정된 프록시로 리디렉션됩니다.

프록시 옵션은 HTTP, HTTPS 및 WebSocket 연결을 지원합니다.

프록시 옵션이 충분히 유연하지 않은 경우 대안으로 다음을 수행할 수 있습니다.

• 직접 프록시 구성
• 서버에서 CORS를 활성화합니다.
• 환경 변수를 사용하여 올바른 서버 호스트 및 포트를 앱에 삽입하십시오.

---

프록시 구성 후 "잘못된 호스트 헤더" 오류

"Invalid Host Header" Errors After Configuring Proxy

프록시 옵션을 활성화하면 보다 엄격한 호스트 검사 세트를 옵트인하게 됩니다. 이는 백엔드를 원격 호스트에 개방된 상태로 두면 컴퓨터가 DNS 리바인딩 공격에 취약해지기 때문에 필요합니다.

이것은 localhost에서 개발할 때 영향을 미치지 않지만 여기에 설명된 대로 원격으로 개발하는 경우 프록시 옵션을 활성화한 후 브라우저에 다음 오류가 표시됩니다.

Invalid Host header

이 문제를 해결하려면 프로젝트의 루트에 있는 .env.development라는 파일에 공개 개발 호스트를 지정할 수 있습니다.

HOST=mypublicdevhost.com

지금 개발 서버를 다시 시작하고 지정된 호스트에서 앱을 로드하면 작동해야 합니다.

여전히 문제가 있거나 클라우드 편집기와 같은 좀 더 이국적인 환경을 사용하는 경우 .env.development.local에 한 줄을 추가하여 호스트 검사를 완전히 우회할 수 있습니다. 이는 위험하며 컴퓨터를 악성 웹사이트의 원격 코드 실행에 노출시킵니다.

# NOTE: THIS IS DANGEROUS!
# It exposes your machine to attacks from the websites you visit.
DANGEROUSLY_DISABLE_HOST_CHECK=true

이 방법은 권장하지 않습니다.

---

수동으로 프록시 구성

Configuring the Proxy Manually

* 참고: 이 기능은 react-scripts@2.0.0 이상에서 사용할 수 있습니다.

프록시 옵션이 충분히 유연하지 않은 경우 Express 앱 인스턴스에 직접 액세스하고 고유한 프록시 미들웨어를 연결할 수 있습니다.

이 기능을 package.json의 프록시 속성과 함께 사용할 수 있지만 모든 논리를 src/setupProxy.js에 통합하는 것이 좋습니다.

먼저 npm 또는 Yarn을 사용하여 http-proxy-middleware를 설치합니다.

$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware

다음으로 src/setupProxy.js를 만들고 그 안에 다음 내용을 넣습니다.

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

module.exports = function(app) {
  // ...
};

이제 원하는 대로 프록시를 등록할 수 있습니다! 다음은 위의 http-proxy-middleware를 사용하는 예입니다.

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

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

참고: 이 파일을 가져올 필요는 없습니다. 개발 서버를 시작하면 자동으로 등록됩니다.

참고: 이 파일은 Node의 JavaScript 구문만 지원합니다. 지원되는 언어 기능만 사용해야 합니다(즉, Flow, ES 모듈 등을 지원하지 않음).

참고: 프록시 기능에 경로를 전달하면 경로에서 글로빙 및/또는 패턴 일치를 사용할 수 있으며 이는 익스프레스 경로 일치보다 더 유연합니다.