不可能在带有 Expo 的 Android 模拟器上混合内容（React Native 和 Api Symfony）

Question

我在 React Native（前面）和 Symfony（API）中的应用程序中遇到混合内容和 CORS 问题。

我使用 expo 来运行我的前端服务器，当我启动服务器时，我每次都可以看到“https”，即使我尝试修改它。我不关心 https，因为它只是适合我的应用程序。

我使用 Nelmio 包在后端处理 CORS :

nelmio_cors:
defaults:
    allow_credentials: true
    allow_origin: ['*']
    allow_headers: ['*']
    allow_methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']

我尝试在我的 app.js 中添加一些配置，尤其是“packagerOpts”和“usesCleartextTraffic”，但正如你猜到的那样，它不起作用：

{"expo": {
"name": "mobile",
"slug": "mobile",
"version": "1.0.0",
"orientation": "portrait",
"packagerOpts": {
  "https": true
},
"icon": "./assets/images/icon.png",
"scheme": "myapp",
"userInterfaceStyle": "automatic",
"newArchEnabled": true,
"ios": {
  "supportsTablet": true
},
"android": {
  "adaptiveIcon": {
    "foregroundImage": "./assets/images/adaptive-icon.png",
    "backgroundColor": "#ffffff"
  }
},
"web": {
  "bundler": "metro",
  "output": "static",
  "favicon": "./assets/images/favicon.png"
},
"plugins": [
  "expo-router",
  [
    "expo-splash-screen",
    {
      "image": "./assets/images/splash-icon.png",
      "imageWidth": 200,
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    }
  ],
  [
    "expo-build-properties",
    {
      "android": {
        "usesCleartextTraffic": true
      }
    }
  ]
],
"experiments": {
  "typedRoutes": true
}}}

我什至尝试使用 --allow-http 启动后端并将前端网址上的 http 更改为 https 但不起作用。

当然，当我在网络上使用expo并删除http的https时，它可以工作，但我不知道我的Android模拟器是否可以...

Answer 1

经过一番阅读后，我找到了解决我的问题的方法。

所以，如果有人遇到这个麻烦：

1. 检查您的防火墙是否没有阻止 ADB 传入连接
2. 在前端调用 10.0.2.2:（后端端口）而不是 localhost 或 127.0.0.1。

   http://10.0.2.2:8000/api/register

3. 请务必使用 --tunnel 运行 expo

   npx expo start --tunnel

   ，因为您的机器和模拟器需要位于同一网络上。

现在它正在工作。

其他 Stackoverflow 解决方案（对我和多个开发人员的响应不起作用）建议使用 10.0.2.2 或计算机 IP 地址更改模拟器代理。