如何在React Native中配置自定义Origin域名？

打包后Android/iOS端Origin Header默认值 #

React Native 不属于浏览器运行环境，底层网络请求走的是各自平台的原生网络栈（Android OkHttp、iOS NSURLSession），生产打包后的应用默认不会主动携带Origin请求头。
你在本地开发阶段看到的localhost:端口Origin，是因为使用了Web端调试（如Expo Web模式、浏览器端调试RN代码），原生模拟器/真机调试阶段默认也不会携带该头。

自定义Origin为app.mydomain.com的方案 #

方案1：Axios全局拦截器配置（全平台通用，推荐） #

该方案无需修改原生代码，直接在JS层统一配置即可，仅对axios发起的请求生效：

import axios from 'axios';

// 全局axios请求拦截器
axios.interceptors.request.use(config => {
  // 仅给目标服务端请求添加Origin，避免影响第三方接口请求
  if (config.url.includes('api.mydomain.com')) {
    config.headers.Origin = 'https://app.mydomain.com';
  }
  return config;
}, error => Promise.reject(error));

// 如果使用自定义axios实例，给实例添加拦截器即可
const customAxios = axios.create({ baseURL: 'https://api.mydomain.com' });
customAxios.interceptors.request.use(config => {
  config.headers.Origin = 'https://app.mydomain.com';
  return config;
});

方案2：原生层全局配置（对应用内所有网络请求生效） #

如果需要给应用内所有网络请求（包括非axios发起的请求）统一添加Origin，可以修改原生层配置：

• Android端：在项目android/app/src/main/java/[你的包名路径]/MainApplication.java中，给OkHttp添加全局拦截器：

OkHttpClient.Builder builder = new OkHttpClient.Builder();
builder.addInterceptor(chain -> {
  Request original = chain.request();
  Request request = original.newBuilder()
    .header("Origin", "https://app.mydomain.com")
    .build();
  return chain.proceed(request);
});

• iOS端：在项目ios/[你的项目名]/AppDelegate.mm中，给NSURLSession配置全局请求头：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // 其他原有代码
  NSDictionary *headers = @{@"Origin": @"https://app.mydomain.com"};
  [[NSURLSessionConfiguration defaultSessionConfiguration] setHTTPAdditionalHeaders:headers];
  return YES;
}

注意事项 #

• 配置Origin时需带上完整协议头（https://），与服务端CORS配置的允许源完全一致，否则会校验失败
• 如果服务端同时校验Referer头，可使用相同逻辑添加Referer: https://app.mydomain.com/即可
• 原生应用本身不存在浏览器的跨域限制，添加Origin头仅为满足服务端校验规则，不会影响其他请求的正常发送

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