跳過fetch訪問ssl限制

1 . iOS的解決辦法:

RCTNetwork.xcodeproj - RCTHTTPRequestHandler.m
找到這句話#pragma mark - NSURLSession delegate
在這句話之后加入后面的方法:

• (void)URLSession:(NSURLSession *)session didReceiveChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition disposition, NSURLCredential *credential))completionHandler
  {
  completionHandler(NSURLSessionAuthChallengeUseCredential, [NSURLCredential credentialForTrust:challenge.protectionSpace.serverTrust]);
  }

2 . android方法:

android比較麻煩.
首先要配置Android源代碼的全部編譯,這一步我被坑了好多天

官方的編譯環(huán)境要求如下，值得注意的是這里的NDK版本最好是r10e纽门，親測過其他兩個版本的NDK并沒有成功摔笤，因此這里最好是下載r10e版本的NDK胸私。

• Android SDK version 23 (編譯SDK版本號在build.gradle中可以找到)
• SDK build tools version 23.0.1(編譯工具版本號在build.gradle中可以找到)
• Android Support Repository >= 17
• Android NDK r10e下載地址

將Gradle指向你的安卓SDK: 設置$ANDROID_SDK和$ANDORID_NDK為對應的目錄，或者按照以下內(nèi)容在react-native根目錄下創(chuàng)建local.properties文件（注意：windows下需要使用反雙斜杠）行瑞。

sdk.dir=指向android sdk目錄的絕對路徑  
ndk.dir=指向android ndk目錄的絕對路徑

例如：

ndk.dir=D\:\\android-ndk-r10e
sdk.dir=C\:\\Users\\AppData\\Local\\Android\\Sdk

當我們 react-native init [ProjectName] 的時候蔬啡，工程node-modules/react-native/ReactAndroid的目錄就包含了源碼，因此我們可以直接讓我們的應用工程引用這一個源碼工程诵肛，因此這里我們直接運行一下命令初始化一個react native工程testapp

react-native init testapp

添加gradle依賴

(1) 在生成的React Native工程中屹培，將android/build.gradle文件中添加gradle-download-task依賴默穴。

dependencies { // gradle可以不替換，還是原來的版本 classpath 'com.android.tools.build:gradle:1.3.1' classpath 'de.undercouch:gradle-download-task:3.1.2' //新增加的內(nèi)容 // 注意：不要把你的應用的依賴放在這里褪秀； // 它們應該放在各自模塊的build.gradle文件中 }

(2) 添加:ReactAndroid項目蓄诽，在android/settings.gradle中添加:ReactAndroid項目。

//包含ReactAndroid工程 include ':ReactAndroid' //指出ReactAndroid工程的地址 project(':ReactAndroid').projectDir = new File(rootProject.projectDir, '../node_modules/react-native/ReactAndroid')

(3) 修改你的android/app/build.gradle文件媒吗，使用:ReactAndroid替換預編譯庫仑氛。例如用compile project(':ReactAndroid'):替換compile 'com.facebook.react:react-native:+'

dependencies { compile fileTree(dir: "libs", include: ["*.jar"]) compile "com.android.support:appcompat-v7:23.0.1" compile project(':ReactAndroid') //添加React-native項目 //compile "com.facebook.react:react-native:+" //注釋掉原來的react-native引用 }

(4) 讓第三方模塊使用你的分支

如果你使用第三方的React Native模塊，你需要重寫它們的依賴以避免它們?nèi)匀淮虬俜降念A編譯庫闸英。否則當你編譯時會報錯-Error: more than one library with package name 'com.facebook.react'.（錯誤：有幾個重名的'com.facebook.react'的包）

修改你的android/app/build.gradle文件锯岖，添加如下內(nèi)容：

configurations.all {
    exclude group: 'com.facebook.react', module: 'react-native'
}

編譯運行

在Android Studio歡迎頁中選擇Import project，隨后選擇應用所在的文件夾甫何。
然后開始Run出吹，這個過程需要下載200多M的文件然后才開始編譯，編譯快的可能幾分鐘辙喂，有時候甚至不一定成功捶牢。
在我編譯的時候查看Gradle Console的時候發(fā)現(xiàn)一直卡在downloadBoost這個task上，

:ReactAndroid:createNativeDepsDirectories UP-TO-DATE
:ReactAndroid:downloadBoost
Download http://mirror.nienbo.com/boost/boost_1_57_0.zip

查看ReactAndroid/build.gradle里面的內(nèi)容可以看到這個任務（如下）下載的是C++的boost庫加派，文件大小接近105M叫确，因此我們把 https://downloads.sourceforge.net/project/boost/boost/1.57.0/boost_1_57_0.zip 替換成 http://mirror.nienbo.com/boost/boost_1_57_0.zip 就會快很多跳芳∩纸酰或者直接從 官網(wǎng)地址 下載并復制到ReactAndroid工程的build/downloads目錄下，這樣就會直接跳過downloadBoost這個task飞盆，編譯速度就會快很多娄琉。
還有一種方法,就是直接下載
用gradle即使翻墻也很難訪問github，所以建議直接把task內(nèi)的地址放在瀏覽器里下載吓歇，這樣的task有4個孽水，分別是downloadBoost，downloadDoubleConversion城看，downloadFolly女气，downloadGlog。注意最后一個downloadJSCHeaders不能通過這種方式下載测柠，正常用gradle下載也能成功

task downloadBoost(dependsOn: createNativeDepsDirectories, type: Download) { src 'https://downloads.sourceforge.net/project/boost/boost/1.57.0/boost_1_57_0.zip' onlyIfNewer true overwrite false dest new File(downloadsDir, 'boost_1_57_0.zip') }

clean與build 問題

當我們成功編譯運行后炼鞠，clean的時候會將我們之前下載的文件包括boost庫文件刪除掉，因此為了clean之后再次下載編譯so庫的問題轰胁，我們需要執(zhí)行以下三個步驟谒主。

1.將ReactAndroid/build/react-ndk 文件夾移動到ReactAndroid項目下也就是ReactAndroid/react-ndk目錄下，這一個目錄是編譯生成的so文件赃阀。

2.將ReactAndroid/build.gradle里面的SourceSets.main里面的jniLibs.srcDir的目錄從"$buildDir/react-ndk/exported"改為"react-ndk/exported"霎肯，這樣就編譯的時候就會去尋找ReactAndroid/react-ndk目錄的so文件。

 sourceSets.main { jni.srcDirs = [] jniLibs.srcDir "react-ndk/exported" //so庫目錄 res.srcDirs = ['src/main/res/devsupport', 'src/main/res/shell', 'src/main/res/views/modal'] java { srcDirs = ['src/main/java', 'src/main/libraries/soloader/java', 'src/main/jni/first-party/fb/jni/java'] exclude 'com/facebook/react/processing' exclude 'com/facebook/react/module/processing' } }

3.將ReactAndroid/build.gradle里面編譯so文件的task注釋掉，并將clean依賴于cleanReactNdkLib的task也注視掉观游，這樣clean的時候才不會出錯搂捧。

//注釋掉下面兩個任務 /* tasks.withType(JavaCompile) { compileTask -> compileTask.dependsOn packageReactNdkLibs //開始編譯前先進行ndk編譯 } clean.dependsOn cleanReactNdkLib*/

這樣clean之后再次build就不會重新進行ndk編譯so文件，縮短編譯的時間懂缕。

好了,下面進行源代碼更改來訪問https.
在node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/network/NetworkingModule.java這個文件里做代碼修改异旧。就我目前知道的,react-native 0.46.0-0.54都行。不同版本的也許文件的位置會稍有不同提佣。

所有的import的包都在這里

import android.net.Uri;
import android.util.Base64;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.GuardedAsyncTask;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.common.StandardCharsets;
import com.facebook.react.common.network.OkHttpCallUtil;
import com.facebook.react.module.annotations.ReactModule;
import com.facebook.react.modules.core.DeviceEventManagerModule.RCTDeviceEventEmitter;
import java.io.IOException;
import java.io.InputStream;
import java.nio.charset.Charset;
import java.security.KeyManagementException;
import java.security.NoSuchAlgorithmException;
import java.security.SecureRandom;
import java.security.cert.CertificateException;
import java.security.cert.X509Certificate;
import java.util.ArrayList;
import java.util.HashSet;
import java.util.List;
import java.util.Set;
import java.util.concurrent.TimeUnit;
import javax.annotation.Nullable;
import javax.net.ssl.HostnameVerifier;
import javax.net.ssl.SSLContext;
import javax.net.ssl.SSLSession;
import javax.net.ssl.TrustManager;
import javax.net.ssl.X509TrustManager;
import okhttp3.Call;
import okhttp3.Callback;
import okhttp3.CookieJar;
import okhttp3.Headers;
import okhttp3.Interceptor;
import okhttp3.JavaNetCookieJar;
import okhttp3.MediaType;
import okhttp3.MultipartBody;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.RequestBody;
import okhttp3.Response;
import okhttp3.ResponseBody;
import okio.ByteString;

添加一個獲取SSLContext的方法：

private SSLContext getSSLContext() {
    X509TrustManager xtm = new X509TrustManager() {
      @Override
      public void checkClientTrusted(java.security.cert.X509Certificate[] chain, String authType)
          throws CertificateException {

      }

      @Override
      public void checkServerTrusted(java.security.cert.X509Certificate[] chain, String authType)
          throws CertificateException {

      }

      @Override
      public X509Certificate[] getAcceptedIssuers() {
        X509Certificate[] x509Certificates = new X509Certificate[0];
        return x509Certificates;
      }
    };

    SSLContext sslContext = null;
    try {
      sslContext = SSLContext.getInstance("SSL");

      sslContext.init(null, new TrustManager[]{xtm}, new SecureRandom());

    } catch (NoSuchAlgorithmException e) {
      e.printStackTrace();
    } catch (KeyManagementException e) {
      e.printStackTrace();
    }

    return sslContext;
  }

之后在包含了OkHttpClient的構(gòu)造函數(shù)里添加一些代碼：

/* package */ NetworkingModule(
      ReactApplicationContext reactContext,
      @Nullable String defaultUserAgent,
      OkHttpClient client,
      @Nullable List<NetworkInterceptorCreator> networkInterceptorCreators) {
    super(reactContext);

    if (networkInterceptorCreators != null) {
      // 略
      client = clientBuilder.build();
    }

    // 這是要添加的代碼
    client = client.newBuilder().hostnameVerifier(new HostnameVerifier() {
      @Override
      public boolean verify(String hostname, SSLSession session) {
        return true;
      }
    }).sslSocketFactory(getSSLContext().getSocketFactory()).build();

    mClient = client;
    mCookieHandler = new ForwardingCookieHandler(reactContext);
    // 略
  }

如上,android的方法全部介紹完畢.

跳過webview訪問ssl限制

1. iOS:
   通過在AppDelegate.m中 加上對NSURLRequest進行擴展加上忽略證書驗證吮蛹。

@implementation NSURLRequest (AllowAnyHTTPSCertificate)

+ (BOOL)allowsAnyHTTPSCertificateForHost:(NSString *)host
{
  return YES;
}

@end

2. Android:
   路徑:ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java

import android.net.http.SslError;
import android.webkit.SslErrorHandler;

@Override
    public boolean canOverrideExistingModule() {
      return true;
    }
    //設置webview繞過ssl
    @Override
    public void onReceivedSslError(WebView webView, SslErrorHandler handler, SslError error) {

      handler.proceed();
      super.onReceivedSslError(webView, handler, error);
    }

參考文章:
https://blog.csdn.net/meyin/article/details/73776548
https://blog.csdn.net/qq_16086969/article/details/53522980
https://www.cnblogs.com/air-liyan/p/6407011.html
https://stackoverflow.com/questions/40240321/how-can-i-implement-ssl-certificate-pinning-while-using-react-native/40334166#40334166
https://stackoverflow.com/questions/32892161/ignore-errors-for-self-signed-ssl-certs-using-the-fetch-api-in-a-reactnative-app
https://stackoverflow.com/questions/40240321/how-can-i-implement-ssl-certificate-pinning-while-using-react-native/40334166#40334166
https://blog.csdn.net/lmj623565791/article/details/48129405
https://blog.csdn.net/vv_bug/article/details/77100113
https://zhuanlan.zhihu.com/p/33033496
http://www.reibang.com/p/5195666d1e30
https://zhuanlan.zhihu.com/p/34691507
https://blog.csdn.net/u014484863/article/details/51580557