React-Native中Fetch通过带账号密码的代理请求问题

我遇到过完全一样的困扰——React Native的原生fetch本身不支持带用户名密码的代理认证，而且Node.js生态里的那些代理模块（比如https-proxy-agent）依赖RN打包器不支持的核心模块，根本没法用。下面几个方案我亲测有效，你可以根据自己的场景选择：

方案1：使用rn-fetch-blob替代原生Fetch（最推荐） #

rn-fetch-blob是专门为React Native设计的网络请求库，完全绕过了Node.js核心模块的限制，直接支持带认证的代理配置，用法和原生fetch差不多，学习成本极低。

步骤： #

1. 安装依赖：

npm install rn-fetch-blob --save

（RN 0.60+版本会自动链接，旧版本需要手动执行react-native link rn-fetch-blob）

2. 配置代理并发送请求：

import RNFetchBlob from 'rn-fetch-blob';

// 代理配置
const proxySettings = {
  host: '你的代理服务器地址', // 比如 'proxy.example.com'
  port: 8080, // 代理端口
  auth: {
    username: '代理用户名',
    password: '代理密码'
  }
};

// GET请求示例
RNFetchBlob.fetch('GET', 'https://你的REST服务器地址/api/data', {
  'Content-Type': 'application/json'
})
.proxy(proxySettings)
.then(res => res.json())
.then(data => {
  // 处理返回的数据
  console.log('请求成功:', data);
})
.catch(err => {
  console.error('请求失败:', err);
});

// POST请求示例
RNFetchBlob.fetch('POST', 'https://你的REST服务器地址/api/submit', {
  'Content-Type': 'application/json'
}, JSON.stringify({ key: 'value' }))
.proxy(proxySettings)
.then(res => res.json())
.then(data => console.log('提交成功:', data))
.catch(err => console.error('提交失败:', err));

这个方案的优势是无需修改原生代码，完全在JS层解决，适配iOS和Android，而且支持文件上传下载等更多原生fetch没有的功能。

方案2：手动添加Proxy-Authorization头（适合已设置代理地址的场景） #

如果用户已经在设备的WiFi设置里配置了代理主机和端口，只是缺少认证信息，你可以手动构造代理认证的请求头，配合原生fetch使用。

代码示例： #

// 生成代理认证的Base64字符串
const proxyUsername = '代理用户名';
const proxyPassword = '代理密码';
const proxyAuthHeader = 'Basic ' + btoa(`${proxyUsername}:${proxyPassword}`);

// 发送请求时添加Proxy-Authorization头
fetch('https://你的REST服务器地址/api/data', {
  method: 'GET',
  headers: {
    'Proxy-Authorization': proxyAuthHeader,
    'Content-Type': 'application/json'
  }
})
.then(res => res.json())
.then(data => console.log('请求成功:', data))
.catch(err => console.error('请求失败:', err));

注意：这个方案的前提是用户已经手动在设备WiFi中设置了代理服务器和端口，否则原生fetch无法知道要走哪个代理。

方案3：自定义原生模块（适合深度定制需求） #

如果你不想依赖第三方库，或者需要更精细的控制，可以自己写React Native原生模块，在Android端用OkHttpClient、iOS端用NSURLSession来配置代理认证。

Android端示例（简化版）： #

创建一个原生Java模块，配置OkHttpClient的代理和认证：

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Promise;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.Response;
import java.net.InetSocketAddress;
import java.net.Proxy;

public class ProxyFetchModule extends ReactContextBaseJavaModule {
    private static final String MODULE_NAME = "ProxyFetch";

    public ProxyFetchModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return MODULE_NAME;
    }

    @ReactMethod
    public void fetchWithProxy(String url, String proxyHost, int proxyPort, String proxyUser, String proxyPass, Promise promise) {
        // 设置代理
        Proxy proxy = new Proxy(Proxy.Type.HTTP, new InetSocketAddress(proxyHost, proxyPort));
        
        // 配置OkHttpClient，添加代理认证
        OkHttpClient client = new OkHttpClient.Builder()
                .proxy(proxy)
                .proxyAuthenticator((route, response) -> {
                    String credential = okhttp3.Credentials.basic(proxyUser, proxyPass);
                    return response.request().newBuilder()
                            .header("Proxy-Authorization", credential)
                            .build();
                })
                .build();

        // 发送请求
        Request request = new Request.Builder().url(url).build();
        client.newCall(request).enqueue(new okhttp3.Callback() {
            @Override
            public void onFailure(okhttp3.Call call, java.io.IOException e) {
                promise.reject("FETCH_FAILED", e.getMessage());
            }

            @Override
            public void onResponse(okhttp3.Call call, Response response) throws java.io.IOException {
                if (response.isSuccessful()) {
                    promise.resolve(response.body().string());
                } else {
                    promise.reject("HTTP_ERROR", "状态码: " + response.code());
                }
            }
        });
    }
}

然后在React Native中调用这个模块：

import { NativeModules } from 'react-native';
const { ProxyFetch } = NativeModules;

ProxyFetch.fetchWithProxy(
    'https://你的REST服务器地址/api/data',
    '你的代理地址',
    8080,
    '代理用户名',
    '代理密码'
)
.then(data => console.log('请求结果:', JSON.parse(data)))
.catch(err => console.error('请求失败:', err));

iOS端的实现逻辑类似，用NSURLSessionConfiguration配置代理和认证即可。

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