FacePlusPlus, “error_message”: “MISSING_ARGUMENTS: api_key”, with React Native fetch request

问题

I'm fairly new to react native and I'm trying to test out using the FacePlusPlus API (https://console.faceplusplus.com/documents/5679127).

Here, I've tried putting 'api_key' in the body, however, I've also tried putting it in headers too. Neither has worked.

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);
    });
  }

In render(), I put console.log(this.state.data) where data is an array to see the response, however all I keep getting is

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

回答1:

To solve this problem you have to set Content-Type header to 'application/x-www-form-urlencoded' and pass your arguments as formData. I put the example with using 'request' npm package.

 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));
 });

来源：https://stackoverflow.com/questions/48652293/faceplusplus-error-message-missing-arguments-api-key-with-react-native-f

标签

react-native

fetch

api-key