8

Is it possible to modify the HTTP request headers of a React Native WebView component on iOS?

I'm aware of the onShouldStartLoadWithRequest function but this doesn't seem to allow any possibility for modification.

Adam Terlson
  • 12,350
  • 2
  • 41
  • 61

1 Answers1

6

You can put your request header on attribute headers like this:

<WebView source={{
  uri: "http://blog.apentle.com/",
  headers: {
    Authorization: "Basic YXBlbnRsZS5jb206YXBlbnRsZQ==",
  }
}}
style={styles.webview} />
DoanND
  • 524
  • 7
  • 7
  • 1
    This does not apply headers to other requests made by the js code from the loaded page. Any idea how to implement it? – twboc May 21 '20 at 07:27
  • 1
    @AdamLagevik In a clean way? NO. What we had to do is to inject javascript into the web view that was loading other resources and add them by ourselves. There are a couple of stack overflow questions about that. https://stackoverflow.com/questions/56029978/adding-custom-headers-in-javascript-for-all-http-requests – twboc Jun 30 '20 at 07:09
  • WebView uses these headers just to fetch the content from URL you provided. It never sets any cookie or header in webview, you'll have to manage that on webpage itself. Check when the request is coming from mobile WebView and set header on response. – Mohd Shad Mirza Jul 15 '21 at 12:30