와 더불어 angular-cli ng serve로컬 개발 서버를 내 프로젝트 디렉토리의 모든 정적 파일을 제공합니다.

내 AJAX 호출을 다른 서버로 프록시하려면 어떻게해야합니까?

2017 업데이트

이제 더 나은 문서를 사용할 수 있으며 JSON 및 JavaScript 기반 구성을 모두 사용할 수 있습니다. angular-cli 문서 프록시

https 프록시 구성 샘플

{
  "/angular": {
     "target":  {
       "host": "github.com",
       "protocol": "https:",
       "port": 443
     },
     "secure": false,
     "changeOrigin": true,
     "logLevel": "info"
  }
}

Angular 2.0 릴리스에 대해 알고있는 한 .ember-cli 파일을 사용하여 프록시를 설정하는 것은 권장되지 않습니다. 공식적인 방법은 아래와 같습니다

1. 아래를 볼 "start"수 package.json있도록 수정

   "start": "ng serve --proxy-config proxy.conf.json",

2. proxy.conf.json프로젝트의 루트에 새 파일을 만들고 그 안에 아래와 같이 프록시를 정의합니다.

   {
     "/api": {
       "target": "http://api.yourdomai.com",
       "secure": false
     }
   }
   

3. 중요한 것은 npm start대신 사용하는 것입니다.ng serve

여기에서 더 많은 것을 읽으십시오 : Proxy Setup Angular 2 cli

아래 예 에서 알아야 할 사항을 설명 하겠습니다.

{
  "/folder/sub-folder/*": {
    "target": "http://localhost:1100",
    "secure": false,
    "pathRewrite": {
      "^/folder/sub-folder/": "/new-folder/"
    },
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

1. / folder / sub-folder / * : 경로는 말한다 : 내 각도 앱 내에서이 경로를 볼 때 (경로는 어디에나 저장할 수 있음) 나는 그것으로 무언가를하고 싶다. * 문자는 하위 폴더 뒤에 오는 모든 항목이 포함됨을 나타냅니다. 예를 들어 / folder / sub-folder / 안에 여러 글꼴이있는 경우 *는 모든 글꼴 을 선택합니다.

2. "target" : 위 경로의 경우 "http : // localhost : 1100"은 대상 URL을 호스트 / 소스로 만듭니다 . 따라서 백그라운드에는 http : // localhost : 1100 / folder / sub-folder /가 있습니다.

3. "pathRewrite ": { "^ / folder / sub-folder /": "/ new-folder /"}, 이제 로컬에서 앱을 테스트한다고 가정 해 보겠습니다. URL http : // localhost : 1100 / folder / sub -folder /에 잘못된 경로 (/ folder / sub-folder /)가 포함될 수 있습니다. 해당 경로를 http : // localhost : 1100 / new-folder / 올바른 경로로 변경하려고하므로 pathRewrite가 유용합니다. 앱의 경로 (왼쪽)를 제외하고 새로 작성된 경로 (오른쪽)를 포함합니다.

4. "안전한" : http 또는 https 사용 여부를 나타냅니다. https가 대상 속성에 사용되는 경우 보안 속성을 true로 설정하고 그렇지 않으면 false로 설정하십시오.

5. "changeOrigin" : 옵션은 호스트 대상이 현재 환경이 아닌 경우에만 필요합니다 (예 : localhost). 호스트를 www.something.com 으로 변경하려는 경우 프록시의 대상이 될 하려면 changeOrigin 속성을 "true"로 설정합니다.

6. "logLevel" : 속성은 개발자가 자신의 터미널 / cmd에 프록시를 표시 할 것인지 지정하므로 이미지에 표시된대로 "debug"값을 사용합니다.

일반적으로 프록시는 로컬에서 응용 프로그램을 개발하는 데 도움이됩니다. 프로덕션 목적으로 파일 경로를 설정하고 이러한 모든 파일이 프로젝트 내부에 로컬로있는 경우 앱에서 경로를 동적으로 변경하지 않고 프록시를 사용하여 액세스 할 수 있습니다.

작동하는 경우 cmd / 터미널에 다음과 같은 내용이 표시됩니다.

이것은 나를 위해 일하는 것에 가깝습니다. 또한 다음을 추가해야했습니다.

"changeOrigin": true,
"pathRewrite": {"^/proxy" : ""}

전체는 proxy.conf.json아래와 같습니다.

{
    "/proxy/*": {
        "target": "https://url.com",
        "secure": false,
        "changeOrigin": true,
        "logLevel": "debug",
        "pathRewrite": {
            "^/proxy": ""
        }
    }
}

편집 : 이것은 현재 ANGULAR-CLI에서 더 이상 작동하지 않습니다.

최신 솔루션은 @imal hasaranga perera의 답변을 참조하십시오.

의 서버 angular-cli는 ember-cli프로젝트 에서 가져 옵니다 . 서버를 구성하려면 .ember-cli프로젝트 루트에 파일을 작성 하십시오. 거기에 JSON 구성을 추가하십시오.

{
   "proxy": "https://api.example.com"
}

서버를 다시 시작하면 모든 요청이 프록시됩니다.

예를 들어, 나는 내 코드에서 상대 요청을 만들고있어 /v1/foo/123에서 포착되고있다, https://api.example.com/v1/foo/123.

서버를 시작할 때 플래그를 사용할 수도 있습니다. ng serve --proxy https://api.example.com

angular-cli 버전의 현재 버전 : 1.0.0-beta.0

더 많은 유연성이 필요할 때 프록시를 사용하는 또 다른 방법은 다음과 같습니다.

'라우터'옵션과 일부 자바 스크립트 코드를 사용하여 대상 URL을 동적으로 다시 작성할 수 있습니다. 이를 위해 'start'스크립트 매개 변수 목록에서 --proxy-conf 매개 변수로 json 파일 대신 javascript 파일을 지정해야합니다.

"start": "ng serve --proxy-config proxy.conf.js --base-href /"

위에 표시된대로 --base-href 매개 변수도 /로 설정해야합니다. 그렇지 않으면 <base href = "...">를 index.html의 경로로 설정해야합니다. 이 설정은이를 재정의하고 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이어야합니다.

Webpack은 http-proxy-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이 라이브 사이트를 가리 킵니다.)

Angular-CLI에 대한 프록시 문서는 여기에서 찾을 수 있습니다.

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

루트 폴더에 proxy.conf.json이라는 파일을 설정 한 후 시작할 때 프록시 구성을 포함하도록 package.json을 편집합니다. "start": "ng serve --proxy-config proxy.conf.json"을 스크립트에 추가 한 후 package.json의 플래그 설정을 무시하므로 ng serve가 아닌 npm start를 실행합니다.

angular-cli의 현재 버전 : 1.1.0

프록시 경로 는 대상으로 구성한 모든 항목에 추가 된다는 점에 유의해야합니다 . 따라서 다음과 같은 구성 :

{
  "/api": {
    "target": "http://myhost.com/api,
    ...
  }
}

와 같은 요청 http://localhost:4200/api은에 대한 호출로 이어 http://myhost.com/api/api집니다. 여기서 의도는 개발 환경과 프로덕션 환경 사이에 두 가지 다른 경로를 갖지 않는 것입니다. /api기본 URL로 사용 하기 만하면됩니다.

따라서 올바른 방법은 api 경로 앞에 오는 부분,이 경우 호스트 주소 만 사용하는 것입니다.

{
  "/api": {
    "target": "http://myhost.com",
    ...
  }
}

누군가가 동일한 대상 또는 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 --proxy-config =. / proxy.conf.ts -o

1 단계 : 루트 폴더로 이동하여 proxy.conf.json 생성

{
  "/auth/*": {
    "target": "http://localhost:8000",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

2 단계 : package.json으로 이동하여 "start"를 찾는 "scripts"를 찾습니다.

"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 start 실행

다음은 또 다른 작업 예입니다 (@ 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

Cors-origin 문제 스크린 샷

내 응용 프로그램에서 Cors 문제가 발생했습니다. 위의 스크린 샷을 참조하십시오. 프록시 구성을 추가 한 후 문제가 해결되었습니다. 내 애플리케이션 URL : localhost : 4200 and requesting api url : " http://www.datasciencetoolkit.org/maps/api/geocode/json?sensor=false&address= "

API 측 no-cors 권한이 허용됩니다. 또한 서버 측에서 cors-issue를 변경할 수없고 각도 (클라이언트 측)에서만 변경해야했습니다.

해결 단계 :

1. src 폴더 안에 proxy.conf.json 파일을 만듭니다.

   {
      "/maps/*": {
        "target": "http://www.datasciencetoolkit.org",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true
      }
    }

2. 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-serve를 다시 시작해야하며 변경 사항 만 업데이트됩니다.

3. 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 프록시를 다시 시작 하면 예상대로 올바르게 작동합니다.

> 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

1. proxy.conf.json에 추가

{
  "/api": {
    "target": "http://targetIP:9080",
    "secure": false,
    "pathRewrite": {"^/proxy" : ""},
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

2. package.json에서 "start": "ng serve --proxy-config proxy.conf.json"

3. 코드에서 let url = "/ api / clnsIt / dev / 78"; 이 URL은 http : // targetIP : 9080 / api / clnsIt / dev / 78로 번역됩니다.