Angular 前端没有从快速后端获得对 http 请求的适当响应

Question

我正在使用 Angular 7 向 Express 4 后端代码发送 http 请求，但不断收到 404 响应作为回报。我认为这可能是我列出http请求路径的方式的问题，但不确定。这是我第一次尝试这样的事情。我在 Angular 中设置了一个 proxy.conf.js 文件以允许跨源通信（角度在 localhost:4200 上运行，在 localhost:8085 上运行）。我的 Express 代码保存在 C:/ABC/myapp 下。以下是相关代码：

Angular proxy.conf.js 文件：

{
  "/": {
    "target": "http://localhost:8085",
    "secure": false,
    "logLevel": "debug"
  }
}

发送 http 请求的 Angular 服务代码：

export class ContactUsService {
private url = '/contactus';
private result: any;
message: string;

addMessage(contactUsMessage: contactUsInterface): Observable<contactUsInterface> {
  return this.http.post<contactUsInterface>(this.url, contactUsMessage). (retry(3));
};

constructor(private http: HttpClient) {}
};

表达 app.js 代码：

var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');
var createError = require('http-errors');
var express = require('express');
var logger = require('morgan');
var mongoose = require('mongoose');
var path = require('path');
var winston = require('winston');
var contactUsRouter = require(path.join(__dirname, 'routes', 'contactUs'));
var app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/contactus', contactUsRouter);

app.use(function(req, res, next) {
  next(createError(404));
});
app.use(function(err, req, res, next) {
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

contactUs.js 代码（用于contactUsRouter）：

var express = require('express');
var router = express.Router();
var contactUsMessage = require('../models/contactUsMessage');

  router.route('/contactus')
    .get(function(req,res,next){
      res.send("Hello")
    })
    .put(function(req,res,next){
      res.send("Hello")
    });

module.exports = router;

当我到达contactus页面（url：localhost:4200/contactus）并执行表单的提交按钮时，我收到以下错误： 在浏览器控制台中：“HTTP404：未找到 - 服务器未找到与请求的 URI（统一资源标识符）匹配的任何内容。 (XHR)POST - http://localhost:4200/contactus"

在 npm 日志中：“POST /contactus 404 3.081 ms - 2128 错误：无法在视图目录“C:\ABC\myapp\views”中查找视图“错误”。

关于我做错了什么有什么智慧的话？

Answer 1

目前您正在公开POST /contactus/contactus 的路由，因为您使用语句app.use('/contactus', contactUsRouter); 指定基本路由，然后添加/附加一个附加/额外/contactus 并注册POST/PUT 路由。

尝试将 POST 路由更改为 '/'：

var express = require('express');
var router = express.Router();
var contactUsMessage = require('../models/contactUsMessage');

  router.route('/')
    .get(function(req,res,next){
      res.send("Hello")
    })
    .post(function(req,res,next){
      res.send("Hello")
    });

module.exports = router;

希望对您有所帮助！

Answer 2

您的代理配置文件无法正常工作。

请求仍在尝试在端口 4200 上运行的角度应用程序中寻找 POST 方法路由 /contactus ((XHR)POST - http://localhost:4200/contactus)不存在，因此你得到一个 404。

确保您已按照官方 Angular 网站上提到的步骤 - Add Proxy for backend server - angular.io

建议您使用代理路径 /api 而不是 / 。像这样的

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

希望对你有帮助