angular-cli server - API 요청을 다른 서버로 프록시하는 방법은 무엇입니까?
과 angular-cli ng serve로컬 개발 서버, 그것은 내 프로젝트 디렉토리에서 모든 정적 파일을 제공합니다.
AJAX 호출을 다른 서버로 프록시하려면 어떻게 해야 합니까?
2022년 업데이트
공식적으로 권장되는 접근 방식은 이제 여기에 문서화된 접근 방식입니다.
2017년 업데이트
이제 더 나은 문서를 사용할 수 있으며 JSON 및 JavaScript 기반 구성을 모두 사용할 수 있습니다. 각도-cli 문서 프록시
샘플 https 프록시 구성
{
"/angular": {
"target": {
"host": "github.com",
"protocol": "https:",
"port": 443
},
"secure": false,
"changeOrigin": true,
"logLevel": "info"
}
}
Angular 2.0 릴리스에서는 .ember-cli 파일을 사용하여 프록시를 설정하지 않는 것이 좋습니다.공식적인 방법은 아래와 같습니다.
편집을
"start"의 신의의package.json를"start": "ng serve --proxy-config proxy.conf.json",라새파생라는 새 .
proxy.conf.json와 그 와 같은 합니다.{ "/api": { "target": "http://api.yourdomai.com", "secure": false } }은 중한것당사신것는입다니다용한이은요다것▁use니▁you를 사용한다는 것입니다.
npm start에ng serve
여기에서 자세히 알아보기: 프록시 설정 각도 2 CLI
아래 예제에서 알아야 할 사항을 설명하겠습니다.
{
"/folder/sub-folder/*": {
"target": "http://localhost:1100",
"secure": false,
"pathRewrite": {
"^/folder/sub-folder/": "/new-folder/"
},
"changeOrigin": true,
"logLevel": "debug"
}
}
/folder/sub-folder/*: 경로는 다음을 말합니다.각진 앱 안에서 이 경로를 보면(경로는 어디에나 저장할 수 있음) 뭔가 하고 싶습니다.* 문자는 하위 폴더 뒤에 오는 모든 항목이 포함됨을 나타냅니다.예를 들어 /folder/sub-folder/ 안에 글꼴이 여러 개 있으면 *가 모든 글꼴을 선택합니다.
"target": 위의 경로에 대한 "http://localhost:1100"은 대상 URL을 호스트/소스로 만들기 때문에 백그라운드에서 http://localhost:1100/folder/sub-folder/가 됩니다.
"pathRewrite": {"^/folder/sub-folder/: "/new-folder/"}, 이제 앱을 로컬로 테스트하려면 url http://localhost:1100/folder/sub-folder/에 잘못된 경로가 포함되어 있을 수 있습니다. /folder/sub-folder/해당 경로를 http://localhost:1100/new-folder/인 올바른 경로로 변경하려면 pathRewrite가 유용합니다.앱에서 경로(왼쪽)를 제외하고 새로 작성된 경로(오른쪽)를 포함합니다.
"secure": "http" 또는 "https" 중 어느 쪽을 사용하는지 나타냅니다.https가 대상 특성에 사용되는 경우 보안 특성을 true로 설정하거나 그렇지 않으면 false로 설정합니다.
changeOrigin: 옵션은 호스트 대상이 현재 환경이 아닌 경우(예: localhost)에만 필요합니다.프록시의 대상이 될 호스트를 www.something.com 으로 변경하려면 changeOrigin 특성을 "true"로 설정합니다.
"logLevel": 속성은 개발자가 자신의 터미널/cmd에 프록시를 표시할지 여부를 지정하므로 이미지에 표시된 "debug" 값을 사용합니다.
일반적으로 프록시는 응용프로그램을 로컬로 개발하는 데 도움이 됩니다.운영 목적으로 파일 경로를 설정하고 이러한 파일이 모두 프로젝트 내에 로컬로 있는 경우 앱에서 경로를 동적으로 변경하지 않고 프록시를 사용하여 액세스할 수 있습니다.
작동하면 cmd/terminal에 이와 같은 내용이 표시됩니다.
이것은 저를 위해 일할 뻔 했습니다.추가해야 하는 항목:
"changeOrigin": true,
"pathRewrite": {"^/proxy" : ""}
가득한proxy.conf.json아래 표시:
{
"/proxy/*": {
"target": "https://url.com",
"secure": false,
"changeOrigin": true,
"logLevel": "debug",
"pathRewrite": {
"^/proxy": ""
}
}
}
현재 Angular 12를 기준으로 공식적인 접근 방식은 다음과 같습니다.
는 파일을 .proxy.conf.json에 시대에/src프로젝트의 폴더 및 이 폴더를 사용하여 프록시를 정의합니다.
{
"/api": {
"target": "http://api.yourdomai.com",
"secure": false
}
}
을 합니다.angular.json프록시를 실행할 때 포함할 파일:
...
"architect": {
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "your-application-name:build",
"proxyConfig": "src/proxy.conf.json"
},
...
이를 구성별로 설정할 수 있으므로 개발 환경에서만 프록시를 구성하려면(일반적으로 프로덕션에서 HTTP 서버를 사용하여 프록시를 관리할 수 있음) 다음과 같이 구성할 수 있습니다.
...
"architect": {
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"production": {
"browserTarget": "your-application-name:build",
},
"development": {
"browserTarget": "your-application-name:build",
"proxyConfig": "src/proxy.conf.json"
},
...
이제당달때릴이신때▁you를 실행할 때.ng serve요청을 올바르게 프록시합니다.
전체 설명서는 다음과 같습니다: 백엔드 서버에 대한 Angular 프록시 구축 및 제공
편집: 현재 Angular-CLI에서는 더 이상 작동하지 않습니다.
최신 솔루션에 대한 다른 답변 보기
에 있는 angular-cli는 서발니다합생에▁the다▁from에서 유래합니다.ember-cli프로젝트.서버를 구성하려면 다음을 작성합니다..ember-cli프로젝트 루트에 있는 파일입니다.여기에 JSON 구성을 추가합니다.
{
"proxy": "https://api.example.com"
}
서버를 다시 시작하면 서버가 모든 요청을 프록시합니다.
를 들어, 저는 에서 예를들어, 코에상요하청경우는을인적대드▁▁in▁to경우하는에 상대적인 요청을 /v1/foo/123에서픽중인에서 인 것.https://api.example.com/v1/foo/123.
할 때 .ng serve --proxy https://api.example.com
Angular-cli 버전의 전류: 1.0.0-beta.0
유연성이 더 필요할 때 프록시를 사용하는 또 다른 방법은 다음과 같습니다.
'라우터' 옵션과 일부 Javascript 코드를 사용하여 대상 URL을 동적으로 다시 작성할 수 있습니다.이를 위해 '시작' 스크립트 매개 변수 목록에서 --proxy-conf 매개 변수로 json 파일 대신 javascript 파일을 지정해야 합니다.
"start": "ng serve --proxy-config proxy.conf.js --base-href /"
위와 같이 --base-href 파라미터도 <base href="...로 설정해야 합니다."> 인덱스의 경로로 이동합니다.이 설정은 이 설정을 재정의하므로 http 요청의 URL이 올바르게 구성되었는지 확인해야 합니다.
그런 다음 proxy.conf.js(json!이 아님)에 다음 또는 유사한 내용이 필요합니다.
const PROXY_CONFIG = {
"/api/*": {
target: https://www.mydefaulturl.com,
router: function (req) {
var target = 'https://www.myrewrittenurl.com'; // or some custom code
return target;
},
changeOrigin: true,
secure: false
}
};
module.exports = PROXY_CONFIG;
라우터 옵션은 두 가지 방법으로 사용할 수 있습니다.하나는 키 값 쌍을 포함하는 개체를 할당하는 경우입니다. 여기서 키는 일치하도록 요청된 호스트/경로이고 값은 다시 작성된 대상 URL입니다.다른 방법은 사용자 정의 코드를 사용하여 함수를 할당하는 것입니다. 이것은 제가 여기서 보여드리는 예입니다.후자의 경우 라우터 옵션이 작동하려면 대상 옵션을 여전히 어떤 것으로 설정해야 한다는 것을 알게 되었습니다.라우터 옵션에 사용자 정의 기능을 할당하면 대상 옵션이 사용되지 않으므로 true로 설정할 수 있습니다.그렇지 않으면 기본 대상 URL이어야 합니다.
웹팩은 http-http-http-middleware를 사용하므로 유용한 설명서를 찾을 수 있습니다. https://github.com/chimurai/http-proxy-middleware/blob/master/README.md#http-proxy-middleware-options
다음 예제에서는 쿠키에서 개발자 이름을 가져와 사용자 지정 함수를 라우터로 사용하여 대상 URL을 결정합니다.
const PROXY_CONFIG = {
"/api/*": {
target: true,
router: function (req) {
var devName = '';
var rc = req.headers.cookie;
rc && rc.split(';').forEach(function( cookie ) {
var parts = cookie.split('=');
if(parts.shift().trim() == 'dev') {
devName = decodeURI(parts.join('='));
}
});
var target = 'https://www.'+ (devName ? devName + '.' : '' ) +'mycompany.com';
//console.log(target);
return target;
},
changeOrigin: true,
secure: false
}
};
module.exports = PROXY_CONFIG;
쿠키는 localhost 및 경로 '/'로 설정되며 브라우저 플러그인을 사용하여 만료 기간이 깁니다.쿠키가 존재하지 않는 경우 URL은 라이브 사이트를 가리킵니다.)
동일한 대상 또는 TypeScript 기반 구성에 대한 여러 컨텍스트 항목을 찾는 경우.
proxy.conf.ts
const proxyConfig = [
{
context: ['/api/v1', '/api/v2],
target: 'https://example.com',
secure: true,
changeOrigin: true
},
{
context: ['**'], // Rest of other API call
target: 'http://somethingelse.com',
secure: false,
changeOrigin: true
}
];
module.exports = proxyConfig;
ng serve --serve-config=./session.conf.ts -o
1단계: 루트 폴더로 이동하여 proxy.conf.json 생성
{
"/auth/*": {
"target": "http://localhost:8000",
"secure": false,
"logLevel": "debug",
"changeOrigin": true
}
}2단계: 패키지로 이동합니다.json은 "시작" 찾기 아래에서 "시작"을 찾습니다.
"start": "ng serve --proxy-config proxy.conf.json",3단계: 이제 http에 /auth/를 추가합니다.
return this.http
.post('/auth/register/', { "username": 'simolee12', "email": 'xyz@gmail.com', "password": 'Anything@Anything' });
}4단계: 터미널 실행 npm 시작의 마지막 단계
- proxy.conf.json에 추가하면 /api에 대한 모든 요청이 htt://targetIP:targetPort/api로 리디렉션됩니다.
{
"/api": {
"target": "http://targetIP:targetPort",
"secure": false,
"pathRewrite": {"^/api" : targeturl/api},
"changeOrigin": true,
"logLevel": "debug"
}
}
미꾸json, make json,만기들.
"start": "ng serve --proxy-config proxy.conf.json"in codelet url = "/api/clnsIt/dev/78". 이 URL은 http://targetIP:targetPort/api/clnsIt/dev/78로 변환됩니다.
경로Rewrite를 입력하여 강제로 다시 쓸 수도 있습니다.cmd/NPM 콘솔이 "/api/에서 경로 다시 쓰기"와 같은 내용을 기록하는 세부 정보 링크입니다.브라우저 콘솔에서 "http://targeturl:targetPort/api/."로 기록되는 동안 "http://loclahost/api"로 기록됩니다.
프록시 경로는 대상으로 구성한 모든 항목에 추가됩니다.다음과 같은 구성이 있습니다.
{
"/api": {
"target": "http://myhost.com/api,
...
}
}
그리고 같은 요청.http://localhost:4200/api에 대한 호출이 발생합니다.http://myhost.com/api/api여기서의 목적은 개발 환경과 생산 환경 사이에 서로 다른 두 가지 경로가 존재하지 않는 것이라고 생각합니다.사용하기만 하면 됩니다./api기본 URL로 지정합니다.
따라서 올바른 방법은 단순히 api 경로 앞에 오는 부분(이 경우에는 호스트 주소만)을 사용하는 것입니다.
{
"/api": {
"target": "http://myhost.com",
...
}
}
Angular-CLI에 대한 프록시 설명서는 여기에서 찾을 수 있습니다.
https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md
루트 폴더에 proxy.conf.json이라는 파일을 설정한 후 패키지를 편집합니다.json - 시작 시 프록시 구성을 포함합니다.스크립트에 "start": "ng server --proxy-config proxy.conf.json"을 추가한 후 npm start 및 not serve를 실행합니다. 그러면 package.json의 플래그 설정이 무시되기 때문입니다.
angular-cli의 현재 버전: 1.1.0
코르스 문제는 제 지원서에서 직면했습니다.위의 스크린샷을 참조하십시오.프록시 구성 추가 문제가 해결되었습니다. 내 응용 프로그램 URL: localhost:4200 및 요청 api URL:"http://www.datasciencetoolkit.org/maps/api/geocode/json?sensor=false&address="
API 측에 no-cors 권한이 허용되었습니다.또한 서버 측에서는 cors-issue를 변경할 수 없으며 각도(클라이언트 측)로만 변경해야 했습니다.
해결 단계:
- src 폴더 안에 proxy.conf.json 파일을 만듭니다.
{ "/maps/*": { "target": "http://www.datasciencetoolkit.org", "secure": false, "logLevel": "debug", "changeOrigin": true } }
- API 요청 중
this.http .get<GeoCode>('maps/api/geocode/json?sensor=false&address=' + cityName) .pipe( tap(cityResponse => this.responseCache.set(cityName, cityResponse)) );
참고: API 요청에 호스트 이름 URL 건너뛰기가 있습니다. 요청하는 동안 자동으로 추가됩니다.proxy.conf.js를 변경할 때마다 ng-dll을 다시 시작해야 하며, 그러면 변경 사항만 업데이트됩니다.
- angular.json의 프록시 구성
"serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "TestProject:build", "proxyConfig": "src/proxy.conf.json" }, "configurations": { "production": { "browserTarget": "TestProject:build:production" } } },
이 단계를 마친 후 ng-serve Proxy가 올바르게 작동하도록 다시 시작하십시오. 여기를 참조하십시오.
> WARNING in
> D:\angular\Divya_Actian_Assignment\src\environments\environment.prod.ts
> is part of the TypeScript compilation but it's unused. Add only entry
> points to the 'files' or 'include' properties in your tsconfig.
> ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** : Compiled
> successfully. [HPM] GET
> /maps/api/geocode/json?sensor=false&address=chennai ->
> http://www.datasciencetoolkit.org
다음은 다른 작동 예(@angular/cli 1.0.4)입니다.
proxy.conf.json:
{
"/api/*" : {
"target": "http://localhost:8181",
"secure": false,
"logLevel": "debug"
},
"/login.html" : {
"target": "http://localhost:8181/login.html",
"secure": false,
"logLevel": "debug"
}
}
다음과 함께 실행:
ng serve --proxy-config proxy.conf.json
언급URL : https://stackoverflow.com/questions/37172928/angular-cli-server-how-to-proxy-api-requests-to-another-server
'sourcecode' 카테고리의 다른 글
| bash에서 변수의 줄 수를 계산하려면 어떻게 해야 합니까? (0) | 2023.05.23 |
|---|---|
| Node.js에서 "ReferenceError: primaryials is not defined"를 수정하는 방법 (0) | 2023.05.23 |
| 현재 워크시트의 이름을 참조하여 다른 워크시트의 셀을 참조하시겠습니까? (0) | 2023.05.23 |
| PostgreSQL INSERT ON CONCLIVENT UPDATE(업서트) 제외된 모든 값 사용 (0) | 2023.05.23 |
| ng-class를 사용하여 다중 클래스 추가 (0) | 2023.05.23 |