使用POST时不支持Source.headers

Question

我想通过Webview向我的后端发送POST请求。如何获取但出现上述错误。

从文档中

“标头（对象）-与请求一起发送的其他HTTP标头。在Android上，只能与GET请求一起使用。”

我如何解决此问题？

这是我的代码

const data = JSON.stringify({
  type: 'car',
  plate_number: 'c123'
});

return (
  <WebView
    source={{
      uri:'https://api-stg.caspian.id/user/vehicles/add',
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: '54dc3c3c*******'
      },
      body: data
    }}
  />
);

Answer 1

克服此限制的一种方法是在事物的本机端执行此POST请求，等待此响应到达，然后将响应HTML直接输入WebView：

// Here using the fetch API as base, but you can use any
// library you want that is able to perform HTTP requests
constructor(props, ctx) {
  super(props, ctx);
  this.state = { html: null };
}

componentDidMount() {
  const data = JSON.stringify({
    type: 'car',
    plate_number: 'c123'
  });
  fetch('https://api-stg.caspian.id/user/vehicles/add', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: '54dc3c3c*******'
    },
    body: data,
  }).then(response => response.text()).then(text => {
    this.setState({ html: text });
  });
}

render() {
  return this.state.html ? (
    <WebView
      source={{
        html: this.state.html,
        baseUrl: 'https://api-stg.caspian.id/user/vehicles/add',
      }}
      originWhitelist={['*']}
    />
   ) : /* loading UI */ null;
);

以下是WebView的有关source属性以及如何在其中放置静态HTML的文档：

https://facebook.github.io/react-native/docs/webview#source

Answer 2

您可以使用 WebView 的自定义扩展，如 Send Post request along with HttpHeaders on Android 中所述（请参阅其他答案的重复问题）。