Блог

Главная - Вопросы по программированию - Как исправить 404, не найденный при отправке запросов GET / POST на сервер express через Angular App и NodeJS

Как исправить 404, не найденный при отправке запросов GET / POST на сервер express через Angular App и NodeJS

#node.js #angular #rest #http

#node.js #angular #остальное #http

Вопрос:

Я пытаюсь создать приложение Angular, которое отправляет запросы GET amp; POST на сервер Express с использованием NodeJS.

Когда я обслуживаю приложение, запросы GET amp; POST предназначены для отправки на мой локальный сервер, но я получаю сообщение об ошибке в консоли, эта ошибка зарегистрирована ниже.

Кроме того, когда я захожу на localhost: 3000, сервер запущен.

Вот мой класс компонента:

 import { Component, OnInit } from "@angular/core";
import { RootService } from "./root.service";

@Component({
  selector: "app-root",
  templateUrl: "./root.component.html",
  styleUrls: ["./root.component.css"]
})
export class RootComponent implements OnInit {
  constructor(private rootService: RootService) {}

  ngOnInit() {
    this.rootService.getAPIData().subscribe(
      response => {
        console.log("response from GET API is ", response);
      },
      error => {
        console.log("error is ", error);
      }
    );

    this.rootService.postAPIData().subscribe(
      response => {
        console.log("response from POST API is ", response);
      },
      error => {
        console.log("error during post is ", error);
      }
    );
  }
}

И вот root.service.ts:

 import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class RootService {

  constructor(private http: HttpClient) { }

  getAPIData(){
    return this.http.get('/api/getData')
  }

  postAPIData(){
return this.http.post('/api/postData', {'firstName' : 'Code', 'lastName' : 'Handbook'})
  }
}

Вот мой серверный код:

 const express = require('express')
const app = express()
const bodyParser = require('body-parser')

app.get('/', (req, res) => {
res.send('Welcome to Node API')
})

app.get('/getData', (req, res) => {
res.json({'message': 'Hello World'})
})

app.post('/postData', bodyParser.json(), (req, res) => {
res.json(req.body)
})

app.listen(3000, () => console.log('Example app listening on port 3000!'))

У меня также есть этот файл proxy.conf.json:

 {
  "/api/*": {
    "target": "http://localhost:3000",
    "pathRewrite": {"^/api" : ""}
  }
}

Когда я обслуживаю свое приложение, я получаю следующий вывод на консоль:

ошибка в
Object { headers: {…}, status: 404, statusText: «Не найден», url: «http://localhost:4200/api/getData «, ok: false, имя: «HttpErrorResponse», сообщение: «Сбой HTTP-ответа для http://localhost:4200/api/getData : 404 не найден», ошибка: » n n n nerror n n n

Не удается ПОЛУЧИТЬ / api / getData

n n n» } ошибка root.component.ts: 18:8 во время post- это
объект { заголовки: {…}, статус: 404, statusText: «Не найден», url: «http://localhost:4200/api/postData «, ok: false, имя: «HttpErrorResponse», сообщение: «Сбой HTTP-ответа для http://localhost:4200/api/postData : 404 не найден», ошибка: » n n n nerror n n n

Не удается опубликовать / api / postData

n n n»}

Может кто-нибудь, пожалуйста, помочь мне с этой ошибкой?

Ответ №1:

Я думаю, вам нужно указать путь к proxy.conf при запуске приложения Angular.

Ссылка:https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

Ответ №2:

Ваша конфигурация должна выглядеть следующим образом:

 {
  "/api": {
    "target": "http://localhost:3000",
    "pathRewrite": {
      "^/api": ""
    }
  }
}

Комментарии:

1. Привет, я обновил свой прокси.минусы. json, но, к сожалению, я все еще получаю ту же ошибку

2. Вы включили это в конфигурацию вашего webpack?

3. Вы использовали эту команду для запуска?: ng serve --proxy-config proxy.conf.json

4. У меня есть "start": "ng serve --proxy-config proxy.conf.json", в моем package.json

5. Что в DevTools? Если вы добавите маршрут с /api на свой сервер узлов — перехватит ли ваш запрос? Какой порт использует ваш HTTP-клиент для отправки запросов?

Ответ №3:

1. Сначала создайте файл «proxy.config.json» в корневом каталоге и добавьте эти строки внутрь:

 {
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug"
  }
}

2. В «angular.json» в разделе script поместите:

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

3. На терминале напишите «запуск npm»

   note: Don't write "ng serve" , it won't run proxy configuration file.