“为什么在 React Native WebView 中发出 POST 请求时 cookie 无法按预期运行?”

问题描述 投票:0回答:1

当我尝试发出 POST 请求时,我在 React Native WebView 中遇到了 cookie 的问题。尽管设置了必要的标头和参数,cookie 似乎并未按预期运行。当我检查网络请求时,我可以看到 cookie 没有包含在 POST 请求标头中。

我尝试了各种方法,包括将 useWebKit 属性设置为 true,显式设置

javaScriptEnabled
属性、
sharedCookiesEnabled
thirdPartyCookiesEnabled
originWhitelist={["*"]}
,甚至使用不同版本的 React Native 进行测试,但问题仍然存在。

有没有人遇到过类似的问题,cookie 在 React Native WebView 中无法正常工作,特别是 POST 请求?任何对潜在解决方案或调试步骤的见解将不胜感激。谢谢!

react-native cookies webview
1个回答
1
投票

我之前也提取过这个问题。我是这样解决的。希望这个解决方案能帮助您。

首先,您必须在登录后获取cookies并将其保存在AsyncStorageRedux中,然后将

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;
© www.soinside.com 2019 - 2024. All rights reserved.