【问题标题】:How to send data in post body in angular 4如何以角度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

标签: node.js angular typescript 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());
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-03-22
    • 1970-01-01
    • 1970-01-01
    • 2017-09-14
    • 1970-01-01
    • 2018-03-24
    相关资源
    最近更新 更多