Как настроить обратный прокси в Angular 2 - PullRequest
Новая
       40

Как настроить обратный прокси в Angular 2

0 голосов
/ 17 января 2019

файл package.json: 

"start": "gulp serve.dev --color",

класс обслуживания: 

this.mapUrl = @apiproxy
return this.http.post(this.mapUrl, body, { headers: this.headers })

Proxy.config.json: 

{
"/@apiproxy/*": {
"target": "http://url:8080",
"secure": false,
"logLevel": "debug",
"pathRewrite": {"^/@apiproxy" : ""}
 }
}

Я пытался изменить свой файл package.json на 

"start": "gulp serve.dev --proxy-config proxy.conf.json --color",

Но это не помогает. Если я передаю URL-адрес непосредственно в varibale, я получаю ответ на запрос предварительной проверки не проходит проверку контроля доступа: в запрошенной ошибке ресурса отсутствует заголовок «Access-Control-Allow-Origin». Я новичок в угловой. пожалуйста, помогите.

1 Ответ

0 голосов
/ 17 января 2019

Прежде всего, нам нужно настроить прокси. Для этого в Angular Project уже есть файл proxy.conf.js . Следующий прокси-скрипт сообщает, что если приложение веб-интерфейса выполняет вызов API, который имеет / api в своем пути (т. Е. http://localhost:4200/api/),, то преобразуйте этот запрос в целевой путь.

Теперь это означает, что http://localhost:4200/api/ проксируется до http://localhost:8081/api/. Одним из преимуществ использования прокси-сервера является то, что он помогает скрыть данные сервера. В нашем случае localhost: 8080 - это наш сервер. 

const PROXY_CONFIG = [
      {
        context: [
          "/api/"
        ],
        target: "http://localhost:8081/",
        changeOrigin: true,
        secure: false
      }
    ];

    module.exports = PROXY_CONFIG;

Запустить угловой проект, используя определенный прокси 

"scripts": {
    "start": "ng serve --proxy-config proxy.conf.js",
  }

В вашем распоряжении просто используйте относительный URL. Например, 

 public getClientConfig(): Observable<any> {
    return this.http.get(`/api/config`);
  }

Когда запрос выполняется из приложения внешнего интерфейса, он становится http://localhost:4200/api/config, что эквивалентно http://localhost:8081/api/config.

Я не уверен, почему вы используете глоток. Если вы определите цель использования этого, я могу предоставить вам дополнительную информацию.

Наконец, что касается «Access-Control-Allow-Origin», ваш сервер должен внести в белый список IP-адрес сервера, на котором размещено приложение. Ниже приводится простая реализация веб-серверов на основе PHP. 

<?php header('Access-Control-Allow-Origin: youripaddress'); ?>

Я бы предложил пройти https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS для получения более подробной информации о CORS и той же политике происхождения. Кроме того, есть также некоторые расширения chrome, которые помогут исправить проблему с CORS, которую можно использовать в целях разработки.

...