react-native - FacePlusPlus， "error_message": "MISSING_ARGUMENTS: api_key", 与 React Native 获取请求

Question

我对原生 react 相当陌生，我正在尝试使用 FacePlusPlus API ( https://console.faceplusplus.com/documents/5679127 ) 进行测试。

在这里，我尝试将“api_key”放入正文中，但是，我也尝试将其放入 header 中。两者都不起作用。

componentDidMount() {
    var url = 'https://api-us.faceplusplus.com/facepp/v3/detect';

    return fetch(url, {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        api_key: 'blahblahblah',
        api_secret: 'blahblahblah',
      })
    })
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        isLoading: false,
        data: responseJson,
      }, function() {
        // do something with new state
      });
    })
    .catch((error) => {
      console.error(error);
    });
  }

在 render() 中，我将 console.log(this.state.data) 放在 data 是一个数组中以查看响应，但是我得到的只是

Object {
   "error_message": "MISSING_ARGUMENTS: api_key",
} 

Answer 1

要解决此问题，您必须将 Content-Type header 设置为“application/x-www-form-urlencoded” 并将您的参数作为 formData 传递。 我使用“请求”npm 包来放置示例。

 const request = require('request');

 request.post({url:'https://api-us.faceplusplus.com/facepp/v3/compare', formData: {
   api_key: 'your api key',
   api_secret: 'your api secret',
   image_url1: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/George_Lucas_cropped_2009.jpg/220px-George_Lucas_cropped_2009.jpg',
   image_url2: 'https://imgix.bustle.com/uploads/getty/2018/6/13/e4c5921d-3e23-4f13-87fe-0180005d0ace-getty-929360234.jpg?w=970&h=582&fit=crop&crop=faces&auto=format&q=70'
 }}, (err, httpResponse, body) => {
   if (err) {
     return console.error('error', err);
   }
   console.log('success ', JSON.parse(body));
 });