지역 개발 환경에서 크로스 오리핀 요청을 시뮬레이션하기위한 인기있는 도구 및 방법은 주로 브라우저가 부과하는 CORS (Cross-Origin Resource Sharing) 제한을 처리하고 우회하는 것을 중심으로 진행됩니다. 이 도구는 개발자가 로컬 서버에서 CORS를 활성화하거나 프록시를 사용하거나 브라우저 확장 및 구성을 활용하여 크로스 오리핀 상호 작용을 테스트하고 디버깅하는 데 도움이됩니다. 아래는이 목적에 사용되는 몇 가지 일반적인 접근 방식 및 도구에 대한 자세한 정보입니다.
cors 이해
CORS (Cross-Origin Resource Sharing)는 서버가 특정 HTTP 헤더를 통해 명시 적으로 허용하지 않는 한 One Origin (Domain, Protocol, Port)에서 실행되는 웹 애플리케이션을 제한하는 브라우저에서 구현 된 보안 메커니즘입니다. CORS는`access-control-allow-origin '과 같은 헤더를 다시 전송하여 리소스에 액세스 할 수있는 도메인을 나타내는 서버에서 작동합니다. 브라우저는 실제 요청을하기 전에 특정 유형의 크로스 오리핀 호출에 대해 "프리 플라이트"요청 (HTTP 옵션 요청)을 보내서이를 시행합니다. CORS 헤더는 어떤 원점을 허용하는지뿐만 아니라 HTTP 방법 및 헤더를 사용할 수있는 것과 쿠키와 같은 자격 증명을 보낼 수 있는지 제어합니다.
지역 개발 과제
지역 개발 과정에서 프로젝트는 종종 다른 지역 호스트 포트 또는 도메인에서 실행되며, 이는 다른 원산지로 계산되고 CORS 제한을 유발하여 테스트 크로스 오리핀 요청을 어렵게 만듭니다. 개발자는 프론트 엔드 및 백엔드가 생산 환경에 영향을 미치지 않고 제대로 통신 할 수 있도록 이러한 제한 사항을 로컬로 시뮬레이션하거나 우회하는 도구 또는 구성이 필요합니다.
CORS를 시뮬레이션 또는 우회하는 도구 및 방법으로
1. 로컬 서버 프록시
프록싱은 가장 강력하고 널리 사용되는 솔루션 중 하나입니다. 여기에는 클라이언트와 API 서버 간의 중개자 역할을하는 프록시 서버를 실행하는 것이 포함되며, CORS 문제를 피하기 위해 동일한 출처를 통해 크로스 오리핀 요청을 효과적으로 라우팅합니다.
-프록시 지원이 내장 된 개발 서버 : Vite, Webpack Dev Server와 같은 많은 프론트 엔드 개발 도구 또는 React App Support Proxy 구성을 작성합니다. 예를 들어, React App 작성을 사용하면 개발자가`package.json` 또는`setupproxy.js`에서 프록시를 정의하여 API 호출을 다른 포트 또는 도메인에서 실행중인 다른 서버로 전달할 수 있습니다. 이런 식으로 브라우저는 요청이 DEV 서버 자체에 대한 요청이 이루어 지므로 대상 API 서버로 전달하기 때문에 동일한 원점과 통신하고 있다고 생각합니다.
-독립형 프록시 서버 : HTTP-Proxy-Middleware (node.js)와 같은 도구 또는 로컬 컴퓨터에서 구성된 Nginx와 같은 로컬 프록시는 프록시를 경로로 경로로 사용하고 필요한 CORS 헤더를 추가 할 수 있습니다. 개발자는 이러한 서버를 구성하여`access-control-allow-origin : *`또는 기타 적절한 헤더를 포함하도록 즉시 응답을 수정할 수 있습니다.
2. CORS 지원 로컬 API 사본
CORS를 지원하는 API의 로컬 인스턴스를 실행하는 것은 또 다른 효과적인 접근법입니다. Docker 또는 로컬 설정을 사용하여 개발자는 개발 모드에서 CORS를 사용하여 기계에서 API를 실행하여 LocalHost에서 프론트 엔드가 제한없이 자유롭게 통신 할 수 있습니다. 이것은 완전한 제어의 이점과 외부 환경에 대한 의존성이 없습니다.
3. 개발을위한 브라우저 확장
빠른 테스트 또는 디버깅을 위해 많은 개발자가 브라우저에서 CORS 동작을 일시적으로 비활성화하거나 수정하는 브라우저 확장을 사용합니다. 이러한 도구는 개발에만 사용해야하며 생산에 사용되지 않아야합니다.
-Cors Chrome의 차단 해제 :이 확장자는 요청 헤더를 수정하고 브라우저의 Cors 집행을 우회하기 위해 필요한 응답에 필요한 헤더를 주입하여 크로스 오리핀 요청을 활성화합니다.
-Cors Firefox의 모든 곳 : Chrome의 확장과 유사하게 Cors 제한을 켜고 끄므로 개발자가 서버 구성을 변경하지 않고 크로스 오리핀 호출을 테스트 할 수 있습니다.
- Safari의 개발 메뉴 : Safari는 메뉴를 통해 일시적으로 크로스 오리핀 제한을 비활성화 할 수 있으며, Mac 사용자는 로컬 테스트를 수행하는 데 유용합니다.
4. 파일을 열지 않고 로컬 웹 서버 실행
CORS 오류의 근본 원인 중 하나는 브라우저의 '파일 : //'프로토콜로 파일을 직접로드하는 것입니다. 많은 튜토리얼과 Q & A는 웹 서버없이 HTML 페이지를 직접 열면 브라우저가 보안을 위해 많은 작업을 차단하기 때문에 CORS 오류를 트리거한다고 지적합니다. 따라서 Python의 내장 HTTP 서버 (`python3 -m http.server`)와 같은 도구를 사용하여 최소 로컬 HTTP 서버를 실행하면 Node의`HTTP-Server` 패키지 또는 라이브 서버를 사용하면 올바른 로컬 호스트 기원이 가능하며 이러한 오류를 피합니다.
5. 서버 응답 헤더 수정
고유 한 API 또는 백엔드 서비스를 개발할 때 CORS 헤더 추가는 일반적으로 Middleware를 포함 시키거나 웹 서버를 CORS를 지원하도록 구성하여 수행됩니다. 인기있는 백엔드 프레임 워크 및 언어는 CORS를 활성화하는 방법을 확립했습니다.
-Node.js/Express :`Cors '미들웨어 패키지 사용은 CORS 헤더 추가를 단순화합니다.
-ASP.NET Web API :`[ENABLECORS]`와 같은 속성을 지원하여 원산지, 메소드 및 크로스 오리핀 요청에 허용되는 헤더를 지정할 수 있습니다.
-Django :`Django-Cors-Headers '와 같은 미들웨어는 CORS가 로컬에서 지원하는 데 사용됩니다.
6. 공개 또는 타사 프록시로 CORS를 우회합니다
Beeceptor와 같은 일부 온라인 서비스를 통해 개발자는 프록시 서버를 통해 요청을 라우팅하여 API 및 CORS를 우회 할 수 있습니다. 이 서비스는 적절한 CORS 헤더를 추가하므로 브라우저는 응답을 수락합니다. 이 접근법은 로컬 설정이 가능하지 않지만 생산 환경이 아닌 신중하게 사용해야하는 경우 빠른 디버깅에 유용합니다.
***
인기있는 도구 및 기술 요약
- Dev Server Proxying : Vite와 같은 도구에서 프록시 기능을 사용하여 React App, Webpack Dev Server를 작성하십시오.
-로컬 프록시 서버 : node.js의 HTTP-Proxy-Middleware, Nginx는 프록시로 구성되었습니다.
- CORS가 활성화 된 로컬 API : Docker 컨테이너 또는 로컬 API 인스턴스를 실행하여 CORS로 개발하도록 구성됩니다.
- 브라우저 확장 : Cors Unblock (Chrome), Cors Everywhere (Firefox), Safari는 크로스 오리핀 제한을 비활성화합니다.
-로컬 HTTP 서버 : Python의 'http.server`, Node's`http-server '또는`file : //`urls를 사용하는 대신 라이브 서버를 실행합니다.
-Backend Framework Middleware : Node.js 용`Cors '패키지,`[EnableCors]`asp.net Web API,`Django 용 Django-Cors-Headers'.
- 타사 프록시 서비스 : CORS를 우회하는 비슷한 서비스 및 유사한 서비스.