С 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

Подробнее здесь: Настройка прокси 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 / * : path говорит: Когда я вижу этот путь внутри моего приложения angular (путь может быть сохранен где угодно), я хочу что-то с ним сделать. Символ * указывает, что все, что следует за подпапкой, будет включено. Например, если у вас есть несколько шрифтов внутри / folder / sub-folder / , * подберет их все.

2. "target" : " http: // localhost: 1100 " для указанного выше пути сделайте целевой URL-адрес хостом / источником, поэтому в фоновом режиме у нас будет http: // localhost: 1100 / folder / sub-folder /

3. "pathRewrite ": {"^ / ​​folder / sub-folder /": "/ new-folder /"}. Теперь предположим, что вы хотите протестировать свое приложение локально, http: // localhost: 1100 / folder / sub- папка / возможно содержит недопустимый путь: / папка / подпапка /. Вы хотите изменить этот путь на правильный путь, который является http: // localhost: 1100 / new-folder / , поэтому pathRewrite станет очень полезным. Он исключит путь в приложении (слева) и включит только что записанный (справа)

4. "secure" : обозначает, что мы используем http или https. Если в целевом атрибуте используется https, установите для атрибута secure значение true, в противном случае установите для него значение false.

5. "changeOrigin" : опция необходима только в том случае, если ваш целевой хост не является текущим окружением, например: localhost. Если вы хотите изменить хост на www.something.com, который был бы целью в прокси, установите для атрибута changeOrigin значение «true»:

6. "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-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

Вот еще один способ проксирования, когда вам нужна большая гибкость:

Вы можете использовать параметр «маршрутизатор» и некоторый код javascript для динамической перезаписи целевого URL-адреса. Для этого вам нужно указать файл javascript вместо файла json в качестве параметра --proxy-conf в списке параметров сценария start:

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

Как показано выше, для параметра --base-href также необходимо установить значение /, если в противном случае вы установите <base href = "..."> путь в вашем index.html. Этот параметр переопределит это, и необходимо убедиться, что URL-адреса в HTTP-запросах созданы правильно.

Тогда вам понадобится следующий или аналогичный контент в вашем 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. Другой способ - это когда вы назначаете функцию некоторым пользовательским кодом, что я демонстрирую в своих примерах здесь. В последнем случае я обнаружил, что для параметра target все еще нужно что-то установить, чтобы параметр маршрутизатора работал. Если вы назначаете настраиваемую функцию параметру маршрутизатора, целевой параметр не используется, поэтому для него можно просто установить значение true. В противном случае это должен быть целевой URL по умолчанию.

Webpack использует http-proxy-middleware, поэтому вы найдете там полезную документацию: https://github.com/chimurai/http-proxy-middleware/blob/master/README.md#http-proxy-middleware-options

В следующем примере будет получено имя разработчика из файла cookie для определения целевого 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;

(Файл cookie устанавливается для localhost и пути '/' и имеет длительный срок действия с помощью подключаемого модуля браузера. Если файл cookie не существует, URL-адрес будет указывать на действующий сайт.)

Мы можем найти документацию по прокси для Angular-CLI здесь:

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

После настройки файла с именем proxy.conf.json в корневой папке отредактируйте свой package.json, чтобы включить конфигурацию прокси при запуске ng. После добавления "start": "ng serve --proxy-config proxy.conf.json" к вашим скриптам запустите npm start, а не ng serve, потому что это проигнорирует установку флага в вашем package.json.

текущая версия 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",
    ...
  }
}

Шаг 1: перейдите в корневую папку Создайте proxy.conf.json

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

Шаг 2. Перейдите в package.json и найдите "scripts" под этим "start".

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

Шаг 3: теперь добавьте / auth / в свой http

 return this.http
      .post('/auth/register/', { "username": 'simolee12', "email": 'xyz@gmail.com', "password": 'Anything@Anything' });
  }

Шаг 4: Последний шаг в Терминале, запустите npm start

В случае, если кто-то ищет несколько записей контекста для одной и той же цели или конфигурации на основе 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

Вот еще один рабочий пример (@ 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 и запрашивающий URL-адрес API: " http://www.datasciencetoolkit.org/maps/api/geocode/json?sensor=false&address= "

Разрешено разрешение api no-cors. А также я не могу изменить проблему cors на стороне сервера, и мне пришлось изменить только на angular (на стороне клиента).

Шаги по разрешению:

1. создать файл proxy.conf.json внутри папки src.

   {
      "/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))
      );

Примечание: мы пропустили URL-адрес имени хоста в запросе Api, он будет автоматически добавляться при отправке запроса. при изменении 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