Ответ 1

ОБНОВЛЕНИЕ 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 в корне проекта и внутри него определите свои прокси, как proxy.conf.json ниже

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

3. Важно то, что вы используете npm start вместо ng serve

Подробнее читайте здесь: Настройка прокси Angular 2 cli

Ответ 2

Это было близко к работе для меня. Также пришлось добавить:

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

Полный proxy.conf.json показан ниже:

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

Ответ 3

Я объясню все, что вам нужно знать на этом примере:

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

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

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

6. Атрибут "logLevel" указывает, хочет ли разработчик вывести прокси на своем терминале, поэтому он будет использовать значение "отладки", как показано на рисунке.

В целом, прокси помогает в разработке приложения локально. Вы задаете пути к файлам для производственных целей и, если у вас есть все эти файлы локально внутри вашего проекта, вы можете просто использовать прокси для доступа к ним без динамического изменения пути в вашем приложении.

Если это работает, вы должны увидеть что-то подобное в вашем cmd/терминал

Ответ 4

РЕДАКТИРОВАТЬ: ЭТО НЕТ БОЛЬШИХ РАБОТ В ТЕКУЩЕМ 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 version: 1.0.0-beta.0

Ответ 5

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

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

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

текущая версия Angular -cli: 1.1.0

Ответ 6

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

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

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

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

Затем вам понадобится следующий или похожий контент в вашем прокси .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

В следующем примере вы получите имя разработчика из файла 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 и path '/' и с длительным сроком действия с использованием плагина браузера. Если файл cookie не существует, URL-адрес укажет на сайт в реальном времени.)

Ответ 7

Вот еще один рабочий пример (@ 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

Ответ 8

Важно отметить, что прокси-путь будет добавлен к тому, что вы настроили в качестве своей цели. Итак, такая конфигурация:

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

а запрос типа http://localhost:4200/api приведет к вызову http://myhost.com/api/api. Я думаю, что цель здесь состоит в том, чтобы не иметь двух разных путей между развитием и производственной средой. Все, что вам нужно сделать, это использовать /api в качестве базового URL.

Таким образом, правильным способом было бы просто использовать часть, которая предшествует пути api, в этом случае только адрес хоста:

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