首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >从Angular向服务器发送数据时请求正文为空

从Angular向服务器发送数据时请求正文为空
EN

Stack Overflow用户
提问于 2018-05-28 03:01:07
回答 3查看 3.8K关注 0票数 2

我正在尝试从客户端(在Angular中)获取数据到nodejs服务器。

在Angular中,我声明了一个服务。

代码语言:javascript
复制
export class AddTaskService {

  constructor(private http: HttpClient) { }
  url = 'http://localhost:3000/tasks';
  posttasks(task) {
    return this.http.post<string>(this.url, JSON.stringify({ task: task }));
  }

}

在服务器端,我添加了bodyparser并对其进行了配置

index.js

代码语言:javascript
复制
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

router.js

代码语言:javascript
复制
router
    .route("/tasks")
    .post(function (req, res) {
        var taskModel = new taskSchema();
        taskModel.task = req.body.task;
        console.log(req.body);
        taskModel.save(function (err) {
            if (err) {
                res.send(err);
            }
            res.json({
                message: "nouvProj created!"
            });
        });
    });

将postman与x-www-form-urlencoded配合使用可以工作,但在Angular中当II发送数据req.body为空时

编辑:这里是url网络详细信息:通用

代码语言:javascript
复制
Request URL: http://localhost:3000/tasks
Request Method: POST
Status Code: 200 OK
Remote Address: [::1]:3000
Referrer Policy: no-referrer-when-downgrade

响应头

代码语言:javascript
复制
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept
Access-Control-Allow-Methods: GET, POST, PUT ,DELETE
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 31
Content-Type: application/json; charset=utf-8
Date: Sun, 27 May 2018 19:24:57 GMT
ETag: W/"1f-NlZ/5EsK7Z/S3Ze5LQN4AonQQ90"
X-Powered-By: Express

请求头

代码语言:javascript
复制
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: fr-FR,fr;q=0.9,ar-TN;q=0.8,ar;q=0.7,en-US;q=0.6,en;q=0.5
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 14
Content-Type: text/plain
DNT: 1
Host: localhost:3000
Origin: http://localhost:4200
Pragma: no-cache
Referer: http://localhost:4200/
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36

请求负载

代码语言:javascript
复制
{task: "klj"}
task
:
"klj"
EN

回答 3

Stack Overflow用户

发布于 2018-05-28 03:31:34

您可以将HTTP标头作为选项进行传递:

代码语言:javascript
复制
const httpOptions = {
    headers: new HttpHeaders({
        'Content-Type': 'application/x-www-form-urlencoded',
    })
}
return this.http.post<string>(this.url, task, httpOptions);
票数 4
EN

Stack Overflow用户

发布于 2018-10-19 01:44:23

代码语言:javascript
复制
createTask(task) {
  const httpOptions= {headers: new HttpHeaders({'Content-Type':'application/json})};
  const json = JSON.stringify(task);
  
  this.http.post(this.url, json, this.httpOptions);
}

票数 1
EN

Stack Overflow用户

发布于 2018-08-09 01:00:50

就像@Joshua建议的那样,但你必须稍微改变一下

代码语言:javascript
复制
const httpOptions = {
    headers: new HttpHeaders({
        'Content-Type': 'application/x-www-form-urlencoded',
    })
}
return this.http.post<string>(this.url, {task, httpOptions});

在您的服务器API中,您必须像这样获取数据

代码语言:javascript
复制
const data = req.body.task  
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50555535

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档