在Cordova Vue.js中如何重写Origin头实现特定域名API访问限制？

针对你遇到的CORS Origin头限制问题，以下是几种绕过浏览器限制、在Cordova打包后的应用中生效的解决方案：

一、使用Cordova原生HTTP插件替代AJAX请求 #

浏览器的XMLHttpRequest API会阻止修改Origin这类安全敏感头，但Cordova的原生HTTP插件不受此限制。推荐使用cordova-plugin-advanced-http：

1. 安装插件：

cordova plugin add cordova-plugin-advanced-http

2. 在Vue组件中调用插件发送请求，手动设置Origin头：

// 直接使用插件原生API（无需Ionic）
async fetchApiData() {
  try {
    const response = await new Promise((resolve, reject) => {
      cordova.plugin.http.get(
        'https://你的API地址',
        {}, // 请求参数
        { 'Origin': 'https://你允许的域名' }, // 自定义请求头
        (res) => resolve(res),
        (err) => reject(err)
      );
    });
    // 处理响应数据
    console.log(response.data);
  } catch (error) {
    console.error('请求失败:', error);
  }
}

二、通过Service Worker拦截并修改请求头 #

利用Service Worker的请求拦截能力，在请求发送到服务器前修改Origin头，该方案适用于打包后的生产环境：

1. 在Vue项目中启用Service Worker（若使用Vue CLI，可执行vue add pwa快速集成）。

2. 在src/service-worker.js中添加请求拦截逻辑：

self.addEventListener('fetch', (event) => {
  const request = event.request;
  // 仅拦截目标API域名的请求
  if (request.url.startsWith('https://你的API域名/')) {
    // 复制原请求并修改Origin头
    const modifiedHeaders = new Headers(request.headers);
    modifiedHeaders.set('Origin', 'https://你允许的域名');
    
    const modifiedRequest = new Request(request, {
      headers: modifiedHeaders,
      mode: 'cors'
    });
    
    event.respondWith(fetch(modifiedRequest));
  }
});

三、服务器端补充验证逻辑（备选方案） #

若上述前端方案存在限制，可考虑在服务器端调整验证策略：

• 允许Cordova应用的默认Origin（通常为null或file://），同时结合API密钥、JWT令牌等额外身份验证机制，确保请求合法性。
• 避免仅依赖Origin头做安全校验，因为Origin可被原生客户端修改，需配合其他安全措施。

为什么之前的方案失效？ #

• 手动修改Origin失败：浏览器为了安全，禁止通过XMLHttpRequest修改Origin这类受保护的请求头，这是同源策略的强制限制。
• devServer.proxy仅开发环境有效：该代理是Vue CLI开发服务器提供的功能，打包后的应用没有内置此服务器，因此在安卓设备上无法生效。

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