如何以角度4在帖子正文中发送数据

Posted 2023-03-07

【中文标题】如何以角度4在帖子正文中发送数据

【英文标题】：How to send data in post body in angular 4

【发布时间】：2018-09-25 20:57:37

【问题描述】：

以下是发布请求的代码：

export class AuthenticationService 

    private authUrl = 'http://localhost:5555/api/auth';

    constructor(private http: HttpClient) 

    login(username: string, password: string) 
      console.log(username);
      let data = 'username': username, 'password': password;
      const headers = new HttpHeaders ('Content-Type': 'application/json');
      //let options = new RequestOptions(headers: headers);
      return this.http.post<any>(this.authUrl, JSON.stringify(data: data), headers: headers);
    

以下是我尝试访问请求正文的节点代码，在以下情况下，请求正文为空：

router.use(express.static(path.join('webpage')));

var bodyParser = require('body-parser');

router.use(bodyParser.urlencoded( extended: true ));

router.post('/api/auth', function(req, res)
  console.log(req.body);
  console.log(req.body.username + ":" + req.body.password);
);

【问题讨论】：

你为什么要： 1. 自己在客户端将身体串起来；以及 2. 在服务器上使用 URL 编码的解析器？

这是你应该看的angular.io/guide/http

【参考方案1】：

如果正文有效负载包含 application/x-www-form-urlencoded 值，则 post 方法需要如下字符串值 const body = 'client_id=ApiClient&grant_type=password&scope=UiApi&username=' + username +'&password=' +密码；

getLoginCredentialsAccessToken(username: string, password: string) 
: Observable<AccessToken>

const headersList = new HttpHeaders( 'Content-Type': 'application/x-www-form-urlencoded' );

const body = 'client_id=ApiClient&grant_type=password&scope=UiApi&username=' + username +'&password=' +password;
     
return this.http.post<AccessToken>(this.tokenEndpoint, body,  headers: headersList);
  

【参考方案2】：

使用以下方法成功发送请求：

角度：

login(username: string, password: string) 
      const data = 'username': username, 'password': password;
      const config =  headers: new HttpHeaders().set('Content-Type', 'application/json') ;
      return this.http.post<any>(this.authUrl, data, config)
                                .map(res => 
                                  console.log(res);
                                  if (res.user === true) 
                                    localStorage.setItem('currentUser', res.user);
                                    localStorage.setItem('role', res.role);
                                  
                                  return res;
                                  ,
                                  err => 
                                    return err;
                                  
                                );

    

节点

var bodyParser = require('body-parser');
router.use(bodyParser.json());

router.post('/api/auth', function(req, res)
  console.log("request received " + req.body);
);

【讨论】：

从 Express v4.0 开始，使用 app.use(express.json()); 代替 bodyParser 的两行 - var bodyParser = require('body-parser'); router.use(bodyParser.json());