当我尝试发出 POST 请求时,我在 React Native WebView 中遇到了 cookie 的问题。尽管设置了必要的标头和参数,cookie 似乎并未按预期运行。当我检查网络请求时,我可以看到 cookie 没有包含在 POST 请求标头中。
我尝试了各种方法,包括将 useWebKit 属性设置为 true,显式设置
javaScriptEnabled
属性、sharedCookiesEnabled
、thirdPartyCookiesEnabled
、originWhitelist={["*"]}
,甚至使用不同版本的 React Native 进行测试,但问题仍然存在。
有没有人遇到过类似的问题,cookie 在 React Native WebView 中无法正常工作,特别是 POST 请求?任何对潜在解决方案或调试步骤的见解将不胜感激。谢谢!
我之前也提取过这个问题。我是这样解决的。希望这个解决方案能帮助您。
首先,您必须在登录后获取cookies并将其保存在AsyncStorage或Redux中,然后将
cookieString
传递到modifiedHeaders
对象中。
完整代码
import React, { useRef } from 'react';
import { View } from 'react-native';
import WebView from 'react-native-webview';
const MyWebView = () => {
const webViewRef = useRef(null);
// Intercept and modify requests before they are executed
const handleShouldStartLoadWithRequest = (request) => {
// Check if the request URL contains a specific pattern
if (request.url.includes('https://example.com/your/endpoint')) {
const modifiedHeaders = {
...request.headers,
Cookie: 'cookieString' // Set your desired cookie header here
};
const modifiedHeadersJSON = JSON.stringify(modifiedHeaders);
// Load the modified request in the WebView
webViewRef.current.injectJavaScript(`
const xhr = new XMLHttpRequest();
xhr.open('${request.method}', '${request.url}');
// Set the modified headers
const modifiedHeaders = ${modifiedHeadersJSON};
for (let key in modifiedHeaders) {
xhr.setRequestHeader(key, modifiedHeaders[key]);
}
xhr.send();
`);
return false; // Prevent the WebView from loading the original request
}
// Allow other requests to proceed as usual
return true;
};
return (
<View style={{ flex: 1 }}>
<WebView
ref={webViewRef}
source={{ uri: 'https://example.com' }}
onShouldStartLoadWithRequest={handleShouldStartLoadWithRequest}
/>
</View>
);
};
export default MyWebView;