Angular -CLI proxy для бэкэнд не работает

https://github.com/angular/angular-cli#proxy-to-backend здесь приведена инструкция о том, как выполнять проксирование на бэкэнд. Я делал все шаг за шагом, и все еще запросы не проксированы.

8080 - мой экспресс-сервер 4200 - интерфейс Angular2

В проекте Angular2 у меня есть файл proxy.cons.json с контентом вроде этого:

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

В Angular2 package.json я изменил процедуру start на "start": "ng serve --proxy-config proxy.conf.json"

Когда я печатаю внутри commander npm start, то в начале я вижу Proxy created: /api -> http://localhost:8080. Хорошо, до сих пор хорошо, я думаю.

Я пытаюсь отправить запрос (Angular2)

  constructor(private http: Http) {
    this.getAnswer();
  }

  getAnswer(): any {
    return this.http.get("/api/hello")
      .subscribe(response => {
        console.log(response);
      })
  }

Я получаю сообщение об ошибке http://localhost:4200/api/hello 404 (Not Found). Как мы видим, ничего не было проксировано. Зачем? Я сделал что-то не так?

Быть ясным. Когда я перехожу вручную в http://localhost:8080/hello, все работает нормально. На стороне бэкэнда нечего искать.

Ответ 1

Не могли бы вы попробовать с этим:

{
  "/api": {
    "target": "http://url.com",
    "secure": false,
    "pathRewrite": {"^/api" : ""}
  }
}

Это работает для меня,

** NG Live Development Server is running on http://localhost:4200. **
 10% building modules 3/3 modules 0 active[HPM] Proxy created: /api  ->  http://ec2-xx-xx-xx-xx.ap-south-1.compute.amazonaws.com
[HPM] Proxy rewrite rule created: "^/api" ~> ""

Ответ 2

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

"changeOrigin": true,

полный прокси .conf.json, показанный ниже:

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

Ответ 3

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

Это мой прокси .conf.json, показанный ниже:

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

В принципе, я полностью переписал путь. И теперь это работает.

Ответ 4

В MAC это работает для меня

Angular 4 работает localhost: http://localhost:4200/

В package.json

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

В proxy.config.json

Где наш-сервер-сервер будет заменен вне сайта URL

{
  "/v1": {
    "target": "https://our-company-server.com:7002",
    "secure": false,
    "logLevel": "debug"
  }
}

Если запрос angular GET будет...

this.http.get('/v1/dashboard/client', options).map...

// options are headers, params, etc...
// then .map the observable in this case.

Ответ 5

Для тех, у кого есть собственный домен localhost, обратитесь к этому решению

{
  "/api/*": {
    "target": "http://backend.site.example",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": "http://backend.site.example/api"
    }
  }
}

Ответ 6

    Please follow below steps

    1 In Angular project create a file called  **proxy.cons.json** with content like this:

    {
        "/api/*": {
          "target": "http://127.0.0.1:8080",
          "secure": false,
          "logLevel": "debug",
          "changeOrigin": true
        }
      }

    2 edit package.json file and add below code

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


    3 call your backend api like this

       this.http.get('/api/v1/people')
      .map(res => res.json());

    4 run npm start or ng serve --proxy-config proxy.conf.json

Ответ 7

эта работа для меня proxy.config.json файл

{
"/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
    }
}

и добавьте "ng serve --proxy-config proxy.config.json" в package.json и выполните команду npm start