[英]The post request works in Postman and in cURL but not in Angular
I have a remote server and a local client which sends a simple post request with one header Content-Type: application/json
and with the body '{"text": "hello"}'
.我有一个远程服务器和一个本地客户端,它发送一个简单的 post 请求,其中包含一个标题
Content-Type: application/json
和正文'{"text": "hello"}'
。
The server code is here.服务器代码在这里。 It prints the request body and the header.
它打印请求正文和标题。
import * as express from 'express';
import * as bodyParser from "body-parser";
const app = express();
const router = express.Router();
router.route("/home")
.all(bodyParser.json())
.all(function (req, res, next) {
console.log(req.body, req.headers['content-type']); // !!! print to console body and header
next();
})
.post( (req, res, next) => {
res.status(200).json({
message: req.body,
})
}
);
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Methods", "GET, PATCH, PUT, POST, DELETE, OPTIONS");
next();
});
app.use('/api/v1', router);
app.listen(3000, function(){
console.log('listening on 3000');
});
The post request works fine from Postman and from curl. Postman 和 curl 的 post 请求工作正常。
curl --location --request POST 'http://vm-gudiea.sio.lab.emc.com:3000/api/v1/home' --header 'Content-Type: application/json' --data-raw '{\"text\": \"hello\"}'
For both requests the server prints the following body and content-type
header.对于这两个请求,服务器打印以下正文和
content-type
标头。
{ text: 'hello' } 'application/json'
But I need to send the request from my Angular app.但我需要从我的 Angular 应用程序发送请求。 I have the following method in a service there
我在那里的服务中有以下方法
sendInitialRequest(): void {
const myHeaders = new HttpHeaders().set('Content-Type', 'application/json');
this.http.post(this.remoteUrl, JSON.stringify({text: 'hello'}), {headers: myHeaders})
.subscribe(data => console.log(data));
}
But if I call the method remote server will print the output但是如果我调用方法远程服务器将打印输出
{} undefined
So it didn't get a Content-Type
header and body for some reason.因此,由于某种原因,它没有获得
Content-Type
标头和正文。 Where is the bug here?这里的错误在哪里? How can I send a post request with body and header from an Angular app ?
如何从 Angular 应用程序发送带有正文和标题的 post 请求?
if it is related to cors, install this package in you API https://www.npmjs.com/package/cors如果与 cors 相关,请在您的 API https://www.npmjs.com/package/cors 中安装此包
then use it as following然后按如下方式使用它
import * as cors from 'cors';
...
app.options('*', cors());
app.use(cors());
other tipps:其他提示:
do not stringify your JSON in the angular request.不要在角度请求中将您的 JSON 字符串化。 also there is not need to explicitly set the json header, angular will take care of that for you.
也不需要显式设置 json 标头,angular 会为您处理。
this.http.post(this.remoteUrl, {text: 'hello'})
.subscribe(data => console.log(data));
It seems you have cross-origin error.看来你有跨域错误。 Try this:
尝试这个:
npm install --save cors
import express from 'express';
import cors from 'cors';
cosnt app = express();
app.use(cors());
/* your regular routes go here */
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.