首页 > 解决方案 > 角度前端没有从快速后端获得对 http 请求的适当响应

问题描述

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

角 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”中查找视图“错误”。

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

标签: node.jsangularexpress

解决方案


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

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

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;

希望这会有所帮助!


推荐阅读