HTTPSに対応したAlibaba CloudのAPI GatewayがAndroidでNetwork request failedする問題

API GatewayHTTPS化したらreact-nativeのAndroidアプリからfetchできなくなってしまいました。

HTTPへのリクエストは成功するのですがHTTPSへのリクエストを送ると以下のエラーが出てしまいます。

TypeError: Network request failed
    at XMLHttpRequest.xhr.onerror (blob:http://localhost:8081/2cf03b53-c0b2-404c-8dda-906f61a7d7ee:27276:18)
    at XMLHttpRequest.dispatchEvent (blob:http://localhost:8081/2cf03b53-c0b2-404c-8dda-906f61a7d7ee:29368:27)
    at XMLHttpRequest.setReadyState (blob:http://localhost:8081/2cf03b53-c0b2-404c-8dda-906f61a7d7ee:29121:20)
    at XMLHttpRequest.__didCompleteResponse (blob:http://localhost:8081/2cf03b53-c0b2-404c-8dda-906f61a7d7ee:28948:16)
    at blob:http://localhost:8081/2cf03b53-c0b2-404c-8dda-906f61a7d7ee:29058:47
    at RCTDeviceEventEmitter.emit (blob:http://localhost:8081/2cf03b53-c0b2-404c-8dda-906f61a7d7ee:3707:37)
    at MessageQueue.__callFunction (blob:http://localhost:8081/2cf03b53-c0b2-404c-8dda-906f61a7d7ee:2593:44)
    at blob:http://localhost:8081/2cf03b53-c0b2-404c-8dda-906f61a7d7ee:2370:17
    at MessageQueue.__guard (blob:http://localhost:8081/2cf03b53-c0b2-404c-8dda-906f61a7d7ee:2546:13)
    at MessageQueue.callFunctionReturnFlushedQueue (blob:http://localhost:8081/2cf03b53-c0b2-404c-8dda-906f61a7d7ee:2369:14)

ドキュメントやissueやらを読み漁って悩んでいると、以下のコメントを見つけました。どうやら証明書が間違っている時にもこのエラーが出るそうです。

github.com

解決法

中間CA証明書とクロスルート証明書を追加したら解決しました。

さくらのRapidSSLだとこの2つの証明書はここにあって、それぞれコピペします。

そしてAPI GatewaySSL証明書を追加するテキストエリアに以下のように証明書を3つまとめて入力します。

-----BEGIN CERTIFICATE-----
SSL証明書
-----END CERTIFICATE-----
-----BEGIN CERTIFICATE-----
中間CA証明証
-----END CERTIFICATE-----
-----BEGIN CERTIFICATE-----
クロスルート証明書
-----END CERTIFICATE-----

これで私は通信できるようになりました。

参考

qiita.com