За допомогою 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 / * : шлях говорить: Коли я бачу цей шлях всередині мого кутового додатка (шлях можна зберігати де завгодно), я хочу щось з ним зробити. Символ * означає, що буде включено все, що слідує за вкладеною папкою. Наприклад, якщо у вас є декілька шрифтів усередині / 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- folder / можливо, містить неправильний шлях: / folder / sub-folder /. Ви хочете змінити цей шлях на правильний шлях, який є http: // localhost: 1100 / new-folder / , тому pathRewrite стане дуже корисним. Це виключить шлях у програмі (ліва сторона) та включить нещодавно написаний (права сторона)

4. "безпечний" : означає, чи ми використовуємо http або https. Якщо в цільовому атрибуті використовується https, тоді встановіть атрибут secure на true, інакше встановіть його на false

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

6. "logLevel" : атрибут вказує, чи розробник хоче вивести проксі-сервер на свій термінал / cmd, отже, він буде використовувати значення "налагодження", як показано на зображенні

Загалом, проксі допомагає розробляти додаток локально. Ви встановлюєте шляхи до своїх файлів виробничою метою, і якщо у вас є всі ці файли локально всередині вашого проекту, ви можете просто використовувати проксі-сервер для доступу до них, не змінюючи шлях динамічно у вашому додатку.

Якщо це працює, ви повинні побачити щось подібне у вашому cmd / терміналі.

Це було близько до роботи для мене. Також довелося додати:

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

Повністю proxy.conf.jsonпоказано нижче:

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

РЕДАГУВАТИ: ЦЕ БІЛЬШЕ НЕ РОБОТІТЬ В ПОТОЧНОМУ КУТІ

Дивіться відповідь від @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-адреса. Інший спосіб - це коли ви призначаєте функцію з певним користувацьким кодом, що я демонструю у своїх прикладах тут. В останньому випадку я виявив, що цільовий варіант все-таки потрібно встановити на щось, щоб опція маршрутизатора працювала. Якщо ви призначите спеціальну функцію параметру маршрутизатора, тоді цільовий параметр не використовується, тому його можна просто встановити в значення 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, щоб включити конфігурацію проксі-сервера під час запуску. Після додавання "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, знайдіть "сценарії" під цим пунктом пошуку "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

У моїй заявці зіткнулася з проблемою Cors. див. вище скріншот. Після додавання проксі-конфігурації проблему вирішено. URL-адреса мого додатка: localhost: 4200 та запит URL-адреси API: " http://www.datasciencetoolkit.org/maps/api/geocode/json?sensor=false&address= "

Дозвол на сторону API без дозволу. А також я не можу змінити cors-issue на стороні сервера, і мені довелося змінити лише в 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 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

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. у коді нехай url = "/ api / clnsIt / dev / 78"; ця URL-адреса буде перекладена на http: // targetIP: 9080 / api / clnsIt / dev / 78