浏览器中的URL工作正常时,无法路由XHR请求

时间:2018-06-30 12:04:41

标签: node.js angular express xmlhttprequest

我正在尝试使用NoteJS和Express在TypeScript中开发REST API。

到目前为止,我已经设法在localhost上运行API,并且如果我导航到http://localhost:8080,一切都会正常。

特别是,我已经设置了路由http://localhost:8080/newwletter/subscribe,并且如果我使用浏览器导航到该页面,则会将新的(伪)订户正确添加到数据库中(这意味着整个逻辑有效)。 / p>

但是,如果我从客户端Web应用程序进行了XHR调用,则所有请求均由Rute处理程序'*'处理。

这是当前代码:

import express = require('express');

const app = express();

const newsletterRoutes = express.Router();

newsletterRoutes.get('/subscribe', async (req, res) => {
  console.log('req', req);
  res.send(await new Subscribers().add());
});

app.use(function (req, res, next) {

  res.setHeader('Content-Type', 'application/json');
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

  next();
});

app.use('/newsletter', newsletterRoutes);

app.use('*', (req, res) => {
  console.log(req.params);
  res.status(200).send('No valid url').end();
});

在客户端,我正在Angular 6应用中发出请求,如下所示:

this.http.post(url, payload, {
  headers: new HttpHeaders().set('Content-Type', 'application/json')
})
.toPromise()
.then(response => console.log(response))
.catch(err => console.error('XHR Failed to connect to API', err));

1 个答案:

答案 0 :(得分:1)

您的路由是为GET方法定义的,而客户端正在发布POST请求。

执行以下操作之一:

  • 定义newsletterRoutes.post('/subscribe', ...)
  • 致电this.http.get(url, ...)