Cordova应用：如何修改Android端Origin请求头的值

方案1：Capacitor全局配置（Capacitor 3+适用） #

直接通过Capacitor配置修改WebView默认Origin，替代http://localhost：

1. 打开项目根目录的capacitor.config.ts（或capacitor.config.json）
2. 在server字段下添加自定义Origin配置：

export default {
  appId: 'com.your.app.id',
  appName: 'your-app-name',
  webDir: 'www',
  server: {
    origin: 'ionic//myapp' // 可替换为和iOS一致的格式，或直接用应用名称如'myapp'
  }
};

3. 同步并重新构建Android项目：

npx cap sync android
npx cap build android

方案2：HTTP请求拦截器（全Ionic环境通用） #

如果需要更灵活的控制（比如仅针对特定请求修改），可以通过拦截器手动修改Origin头：

Angular HttpClient场景 #

1. 创建拦截器文件origin.interceptor.ts：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Capacitor } from '@capacitor/core';

@Injectable()
export class OriginInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    if (Capacitor.getPlatform() === 'android') {
      const modifiedReq = request.clone({
        setHeaders: {
          Origin: 'ionic//myapp' // 自定义目标Origin值
        }
      });
      return next.handle(modifiedReq);
    }
    return next.handle(request);
  }
}

2. 在AppModule中注册拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { OriginInterceptor } from './origin.interceptor';

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: OriginInterceptor, multi: true }
  ]
})
export class AppModule { }

Axios场景 #

在Axios实例中添加请求拦截逻辑：

import axios from 'axios';
import { Capacitor } from '@capacitor/core';

const api = axios.create({ baseURL: 'https://your-api-domain.com' });

api.interceptors.request.use(config => {
  if (Capacitor.getPlatform() === 'android') {
    config.headers['Origin'] = 'ionic//myapp';
  }
  return config;
});

export default api;

方案3：Cordova环境适配 #

如果项目基于Cordova，可通过以下方式修改：

方式A：修改WebView配置 #

打开platforms/android/app/src/main/java/com/your/app/MainActivity.java，在onCreate方法中添加：

import android.webkit.WebSettings;
import org.apache.cordova.CordovaWebView;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    CordovaWebView webView = (CordovaWebView) appView.getEngine().getView();
    WebSettings settings = webView.getSettings();
    settings.setOriginWhitelist("*"); // 允许自定义Origin
}

方式B：用Cordova HTTP插件设置头 #

使用cordova-plugin-advanced-http插件手动指定Origin：

import { HTTP } from '@ionic-native/http/ngx';
import { Platform } from '@ionic/angular';

constructor(private http: HTTP, private platform: Platform) {}

async fetchData() {
  if (this.platform.is('android')) {
    await this.http.setHeader('*', 'Origin', 'ionic//myapp');
  }
  const response = await this.http.get('https://your-api-url.com', {}, {});
  // 处理响应逻辑
}

注意：修改Origin后需确保后端服务已将该自定义Origin加入CORS允许列表，避免请求被拦截。

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