React Native iOS模拟器调用本地Flask服务报400错误求助

问题 #

我用MacBook M1在Xcode的iPhone模拟器上运行React Native应用，向本地Flask服务（http://127.0.0.1:5000）发起API请求时出现异常：

• React Native iOS Node控制台报错"Network request failed"及TypeError；
• Flask控制台返回400状态码、"Bad request version"等错误。

但切换到AWS上的远程Flask服务时能正常运行，Android模拟器无论连本地还是远程服务都没问题。

控制台日志 #

React Native iOS Node控制台日志 #

LOG  Running local build
LOG  localhostUrl: http://127.0.0.1:5000
ERROR  api error: [TypeError: Network request failed]
ERROR  failed to fetch user summary: {"type":"userSummary/fetch/rejected","meta":{"requestId":"2hAYW5pj0wlhgG0tGpcPj","rejectedWithValue":false,"requestStatus":"rejected","aborted":false,"condition":false},"error":{"name":"TypeError","message":"Cannot read property 'rejectWithValue' of undefined","stack":"TypeError: Cannot read property 'rejectWithValue' of undefined\n    at handleApi$ (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.appName:639031:68)\n    at call (native)\n    at tryCatch (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.appName:20683:23)\n    at anonymous (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.appName:20764:32)\n    at anonymous (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.appName:20708:30)\n    at call (native)\n    at tryCatch (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.appName:20683:23)\n    at invoke (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.appName:20714:30)\n    at anonymous (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.appName:20721:19)\n    at tryCallOne (/Users/distiller/react-native/sdks/hermes/build_iphonesimulator/lib/InternalBytecode/InternalBytecode.js:53:16)\n    at anonymous (/Users/distiller/react-native/sdks/hermes/build_iphonesimulator/lib/InternalBytecode/InternalBytecode.js:139:27)\n    at apply (native)\n    at anonymous (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.appName:25543:26)\n    at _callTimer (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.appName:25462:17)\n    at _callReactNativeMicrotasksPass (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.appName:25492:17)\n    at callReactNativeMicrotasks (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.appName:25655:44)\n    at __callReactNativeMicrotasks (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.appName:4623:46)\n    at anonymous (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.appName:4435:45)\n    at __guard (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.appName:4607:15)\n    at flushedQueue (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.appName:4434:21)\n    at callFunctionReturnFlushedQueue (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.appName:4419:33)"}}

Flask控制台日志 #

ERROR:werkzeug:127.0.0.1 - - [18/Aug/2023 17:05:38] code 400, message Bad request version ('Æ\x18\x00*')
INFO:werkzeug:127.0.0.1 - - [18/Aug/2023 17:05:38] "üñí|RþêÂõ%Ãb*k;Â7ûÿU¦dìqá *¯¹Ü¶ØÔzCÞÛ»_^wç\x0c´ìkYq·Æ*" HTTPStatus.BAD_REQUEST -
ERROR:werkzeug:127.0.0.1 - - [18/Aug/2023 17:05:38] code 400, message Bad HTTP/0.9 request type ("\x16\x03\x01\x02\x00\x01\x00\x01ü\x03\x03\x12u\x87ß;Ý'ÉîÙ»?nÀ«Ê%sº\x9cÅr\x86fe³\x88&\x92¯\x19\x81")
INFO:werkzeug:127.0.0.1 - - [18/Aug/2023 17:05:38] "üuß;Ý'ÉîÙ»?nÀ«Ê%sºÅrfe³&¯ (è¯(û4ùwÝsÞÿgT¿IcÕ±qUóreÏ,ªªÀ,À+Ì©À0À/̨À" HTTPStatus.BAD_REQUEST -
ERROR:werkzeug:127.0.0.1 - - [18/Aug/2023 17:05:38] code 400, message Bad request syntax ("\x16\x03\x01\x00}\x01\x00\x00y\x03\x01NÏЮû½à\x84ó_8\x7f:1gg\x15\x8f\x86j]?d\x94Jçìv4î\x00\x14\x00\x00\x14À")
INFO:werkzeug:127.0.0.1 - - [18/Aug/2023 17:05:38] "}yNÏЮû½àó_8:1ggj]?dJçìv4îÀ" HTTPStatus.BAD_REQUEST -

解决方案 #

1. 替换本地服务地址为Mac局域网IP #

iPhone模拟器内的127.0.0.1指向模拟器自身，而非Mac主机。需将请求地址改为Mac的局域网IP：

• 查看IP：终端输入ifconfig | grep inet，复制en0下的inet地址；
• 修改React Native配置，把http://127.0.0.1:5000替换为http://[你的局域网IP]:5000。

2. 调整Flask服务绑定地址 #

确保Flask服务绑定到0.0.0.0，允许外部设备访问：

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)

3. 配置iOS ATS规则 #

如果使用HTTP协议，需在iOS项目的Info.plist中添加ATS例外：

• 打开Xcode里的iOS项目，找到Info.plist；
• 添加以下配置（可选择宽松或严格模式）：

  <key>NSAppTransportSecurity</key>
  <dict>
      <!-- 宽松模式：允许所有HTTP请求 -->
      <key>NSAllowsArbitraryLoads</key>
      <true/>
      <!-- 严格模式：仅允许指定域名的HTTP请求 -->
      <!-- <key>NSExceptionDomains</key>
      <dict>
          <key>[你的局域网IP]</key>
          <dict>
              <key>NSIncludesSubdomains</key>
              <true/>
              <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
              <true/>
          </dict>
      </dict> -->
  </dict>
  

4. 排查协议混淆问题 #

Flask的乱码请求可能是协议不匹配导致：

• 确认Flask是否启用HTTPS（比如使用ssl_context参数）；
• 确保React Native请求的协议（HTTP/HTTPS）和Flask服务完全一致。

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