chore(docs): Added guide for working with custom headers and cookies (#994)
* Added guide for working with custom headers and cookies * Remove extraneous files
This commit is contained in:
Jamon Holmgren
Thibault Malbranche
parent
c1b3696e01
commit
8c9f986df0
|
|
@ -389,3 +389,92 @@ export default class App extends Component {
|
|||
This code will result in this alert:
|
||||
|
||||
<img alt="Alert showing communication from web page to React Native" width="200" src="https://user-images.githubusercontent.com/1479215/53671269-7e822300-3c32-11e9-9937-7ddc34ba8af3.png" />
|
||||
|
||||
### Working with custom headers, sessions, and cookies
|
||||
|
||||
#### Setting Custom Headers
|
||||
|
||||
In React Native WebView, you can set a custom header like this:
|
||||
|
||||
```jsx
|
||||
<WebView
|
||||
source={{
|
||||
uri: 'http://example.com',
|
||||
headers: {
|
||||
'my-custom-header-key': 'my-custom-header-value',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
This will set the header on the first load, but not on subsequent page navigations.
|
||||
|
||||
In order to work around this, you can track the current URL, intercept new page loads, and navigate to them yourself ([original credit for this technique to Chirag Shah from Big Binary](https://blog.bigbinary.com/2016/07/26/passing-request-headers-on-each-webview-request-in-react-native.html)):
|
||||
|
||||
```jsx
|
||||
const CustomHeaderWebView = props => {
|
||||
const { uri, onLoadStart, ...restProps } = props;
|
||||
const [currentURI, setURI] = useState(props.source.uri);
|
||||
const newSource = { ...props.source, uri: currentURI };
|
||||
|
||||
return (
|
||||
<WebView
|
||||
{...restProps}
|
||||
source={newSource}
|
||||
onShouldStartLoadWithRequest={request => {
|
||||
// If we're loading the current URI, allow it to load
|
||||
if (request.url === currentURI) return true;
|
||||
// We're loading a new URL -- change state first
|
||||
setURI(request.url);
|
||||
return false;
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
<CustomHeaderWebView
|
||||
source={{
|
||||
uri: 'http://example.com',
|
||||
headers: {
|
||||
'my-custom-header-key': 'my-custom-header-value',
|
||||
},
|
||||
}}
|
||||
/>;
|
||||
```
|
||||
|
||||
#### Managing Cookies
|
||||
|
||||
You can set cookies on the React Native side using the [react-native-cookies](https://github.com/joeferraro/react-native-cookies) package.
|
||||
|
||||
When you do, you'll likely want to enable the [sharedCookiesEnabled](Reference#sharedCookiesEnabled) prop as well.
|
||||
|
||||
```jsx
|
||||
const App = () => {
|
||||
return (
|
||||
<WebView
|
||||
source={{ uri: 'http://example.com' }}
|
||||
sharedCookiesEnabled={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
If you'd like to send custom cookies in the WebView itself, you can do so in a custom header, like this:
|
||||
|
||||
```jsx
|
||||
const App = () => {
|
||||
return (
|
||||
<WebView
|
||||
source={{
|
||||
uri: 'http://example.com',
|
||||
headers: {
|
||||
Cookie: 'cookie1=asdf; cookie2=dfasdfdas',
|
||||
},
|
||||
}}
|
||||
sharedCookiesEnabled={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
Note that these cookies will only be sent on the first request unless you use the technique above for [setting custom headers on each page load](#Setting-Custom-Headers).
|
||||
|
|
|
|||
|
|
@ -85,9 +85,9 @@ The object passed to `source` can have either of the following shapes:
|
|||
|
||||
**Load uri**
|
||||
|
||||
- `uri` (string) - The URI to load in the `WebView`. Can be a local or remote file.
|
||||
- `uri` (string) - The URI to load in the `WebView`. Can be a local or remote file, and can be changed with React state or props to navigate to a new page.
|
||||
- `method` (string) - The HTTP Method to use. Defaults to GET if not specified. On Android, the only supported methods are GET and POST.
|
||||
- `headers` (object) - Additional HTTP headers to send with the request. On Android, this can only be used with GET requests.
|
||||
- `headers` (object) - Additional HTTP headers to send with the request. On Android, this can only be used with GET requests. See the [Guide](Guide.md#setting-custom-headers) for more information on setting custom headers.
|
||||
- `body` (string) - The HTTP body to send with the request. This must be a valid UTF-8 string, and will be sent exactly as specified, with no additional encoding (e.g. URL-escaping or base64) applied. On Android, this can only be used with POST requests.
|
||||
|
||||
**Static HTML**
|
||||
|
|
@ -689,7 +689,7 @@ Possible values for `mixedContentMode` are:
|
|||
|
||||
### `thirdPartyCookiesEnabled`
|
||||
|
||||
Boolean value to enable third party cookies in the `WebView`. Used on Android Lollipop and above only as third party cookies are enabled by default on Android Kitkat and below and on iOS. The default value is `true`.
|
||||
Boolean value to enable third party cookies in the `WebView`. Used on Android Lollipop and above only as third party cookies are enabled by default on Android Kitkat and below and on iOS. The default value is `true`. For more on cookies, read the [Guide](Guide.md#Managing-Cookies)
|
||||
|
||||
| Type | Required | Platform |
|
||||
| ---- | -------- | -------- |
|
||||
|
|
@ -879,7 +879,7 @@ Set whether Geolocation is enabled in the `WebView`. The default value is `false
|
|||
|
||||
### `allowFileAccessFromFileURLs`
|
||||
|
||||
Boolean that sets whether JavaScript running in the context of a file scheme URL should be allowed to access content from other file scheme URLs. The default value is `false`.
|
||||
Boolean that sets whether JavaScript running in the context of a file scheme URL should be allowed to access content from other file scheme URLs. The default value is `false`.
|
||||
|
||||
| Type | Required | Platform |
|
||||
| ---- | -------- | -------- |
|
||||
|
|
@ -1002,14 +1002,15 @@ Sets whether WebView should use browser caching.
|
|||
Overrides the way the cache is used. The way the cache is used is based on the navigation type. For a normal page load, the cache is checked and content is re-validated as needed. When navigating back, content is not revalidated, instead the content is just retrieved from the cache. This property allows the client to override this behavior.
|
||||
|
||||
Possible values are:
|
||||
|
||||
- `LOAD_DEFAULT` - Default cache usage mode. If the navigation type doesn't impose any specific behavior, use cached resources when they are available and not expired, otherwise load resources from the network.
|
||||
- `LOAD_CACHE_ELSE_NETWORK` - Use cached resources when they are available, even if they have expired. Otherwise load resources from the network.
|
||||
- `LOAD_NO_CACHE` - Don't use the cache, load from the network.
|
||||
- `LOAD_CACHE_ONLY` - Don't use the network, load from the cache.
|
||||
|
||||
| Type | Required | Default | Platform |
|
||||
| ------- | -------- | -------------| -------- |
|
||||
| string | No | LOAD_DEFAULT | Android |
|
||||
- `LOAD_CACHE_ONLY` - Don't use the network, load from the cache.
|
||||
|
||||
| Type | Required | Default | Platform |
|
||||
| ------ | -------- | ------------ | -------- |
|
||||
| string | No | LOAD_DEFAULT | Android |
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -1035,7 +1036,7 @@ A Boolean value that determines whether pressing on a link displays a preview of
|
|||
|
||||
### `sharedCookiesEnabled`
|
||||
|
||||
Set `true` if shared cookies from `[NSHTTPCookieStorage sharedHTTPCookieStorage]` should used for every load request in the WebView. The default value is `false`.
|
||||
Set `true` if shared cookies from `[NSHTTPCookieStorage sharedHTTPCookieStorage]` should used for every load request in the WebView. The default value is `false`. For more on cookies, read the [Guide](Guide.md#Managing-Cookies)
|
||||
|
||||
| Type | Required | Platform |
|
||||
| ------- | -------- | -------- |
|
||||
|
|
|
|||
Loading…
Reference in New Issue