Cordova应用模拟浏览器：重定向后注入JS解决跨域Cookie问题

没问题，这个需求完全可以实现！Cordova的WebView本身就支持注入自定义JavaScript，刚好能解决你遇到的跨域Ajax无法携带Cookie的痛点。下面是具体的实现步骤和注意事项：

1. 先等Cordova初始化完成再跳转 #

Cordova有个核心的deviceready事件，必须等这个事件触发后再进行页面跳转，不然WebView的相关API可能还没准备好。代码示例：

document.addEventListener('deviceready', function() {
  // 初始化完成后再跳转到目标页面
  window.location.href = 'https://你的目标页面地址.com';
}, false);

2. 向跳转后的页面注入自定义脚本 #

这里有两种可靠的实现方式，你可以根据需求选择：

方法一：用cordova-plugin-inappbrowser（推荐） #

这个插件是Cordova官方推荐的，专门用来控制WebView的行为，注入脚本的API非常直观，而且能更好地隔离页面环境。用法如下：

document.addEventListener('deviceready', function() {
  // 打开目标页面，_self表示用当前WebView打开，也可以用_blank开新窗口
  const webView = cordova.InAppBrowser.open('https://你的目标页面地址.com', '_self', 'location=yes');
  
  // 监听页面加载完成事件，确保脚本注入时机正确
  webView.addEventListener('loadstop', function() {
    // 注入自定义脚本
    webView.executeScript({
      code: `
        // 这里写你的核心逻辑，比如处理跨域Ajax的Cookie问题
        // 重写XMLHttpRequest，强制开启跨域携带Cookie
        const originalXhrOpen = XMLHttpRequest.prototype.open;
        XMLHttpRequest.prototype.open = function(method, url) {
          originalXhrOpen.call(this, method, url, true, null, null);
          this.withCredentials = true; // 关键：开启跨域Cookie携带
        };

        // 同时处理Fetch请求
        const originalFetch = window.fetch;
        window.fetch = function(resource, options = {}) {
          options.credentials = 'include'; // 强制携带Cookie
          return originalFetch(resource, options);
        };

        // 也可以直接设置自定义Cookie（如果需要）
        document.cookie = "自定义Cookie名=值; path=/; domain=你的目标域名.com";
      `
    });
  });
}, false);

方法二：直接在主WebView注入（原生配置+JS） #

如果不想用插件，也可以通过修改Cordova的原生配置，让主WebView允许注入脚本：

Android端配置

在项目根目录的config.xml里添加以下偏好设置：

<preference name="AllowInlineScript" value="true" />
<preference name="AllowUniversalAccessFromFileURLs" value="true" />

iOS端配置

同样在config.xml里添加：

<preference name="AllowUniversalAccessFromFileURLs" value="true" />
<preference name="AllowInlineMediaPlayback" value="true" />

然后用JS监听页面加载完成后注入脚本：

document.addEventListener('deviceready', function() {
  window.location.href = 'https://你的目标页面地址.com';
  
  // 监听目标页面加载完成
  window.addEventListener('load', function() {
    injectCustomScript();
  });
});

function injectCustomScript() {
  const scriptTag = document.createElement('script');
  scriptTag.textContent = `
    // 这里写你的自定义脚本逻辑，和上面的XHR/Fetch重写逻辑一致
    const originalXhrOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url) {
      originalXhrOpen.call(this, method, url, true, null, null);
      this.withCredentials = true;
    };

    const originalFetch = window.fetch;
    window.fetch = function(resource, options = {}) {
      options.credentials = 'include';
      return originalFetch(resource, options);
    };
  `;
  document.head.appendChild(scriptTag);
}

3. 跨域Cookie生效的关键前提 #

光注入脚本还不够，目标服务器的CORS配置必须配合：

• 服务器响应头要设置Access-Control-Allow-Origin为你的Cordova应用的源（注意不能是*，因为*和withCredentials不能同时生效，最好指定具体的源）
• 服务器必须设置Access-Control-Allow-Credentials: true

4. 可行性说明 #

这种方案是完全可行的，很多Cordova开发者用这种方式实现类似浏览器扩展的用户脚本功能，完美解决跨域请求的Cookie携带问题。只要你按照上面的步骤配置，就能达到预期效果。

内容的提问来源于stack exchange，提问作者vaati