Source.headers is not supported when using POST

Question

I wanted to send a POST request to my backend with webview. How do i get but i got the above error.

From the docs:

" headers (object) - Additional HTTP headers to send with the request. On Android, this can only be used with GET requests."

How do i get a work-around for this ?

this is my code

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

Did you get a result with postman or other REST client ? – Anis D Oct 01 '18 at 11:49 — Anis D, Oct 01 '18 at 11:49
yeah, it works with postman. – william anputra Oct 01 '18 at 15:24 — william anputra, Oct 01 '18 at 15:24

score 4 · Answer 1 · answered Oct 02 '18 at 04:17

One way to get around this limitation is by performing this POST request in the React Native side of things, waiting for this response to arrive, and then feed the response HTML into the WebView directly:

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

Here are the WebView's docs regarding the source property and how to put a static HTML in there:

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

Although it's not an elegant way to use the `WebView`, I couldn't make it work another way. Thanks! — Minoru, Nov 11 '19 at 19:37

score 0 · Answer 2 · answered Feb 24 '21 at 19:52

0

You can use a custom extension of WebView, as described in Send Post request along with HttpHeaders on Android (see the duplicate questions for other answers).

answered Feb 24 '21 at 19:52

Alex Cohn

56,089
9
113
307

Source.headers is not supported when using POST

2 Answers2