Source.headers не поддерживается при использовании POST - PullRequest
Новая
       20

Source.headers не поддерживается при использовании POST

0 голосов
/ 01 октября 2018

enter image description here

Я хотел отправить запрос 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
    }}
  />
);

1 Ответ

0 голосов
/ 02 октября 2018

Один из способов обойти это ограничение - выполнить этот запрос POST на стороне React Native, дождаться получения этого ответа и затем напрямую передать 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 относительно свойства источника и того, как поместить туда статический HTML:

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

...