React 本机应用程序未连接到 VPN 服务器答案

【问题标题】：React native app doesn't connect to VPN serverReact 本机应用程序未连接到 VPN 服务器
【发布时间】：2020-09-15 07:05:19
【问题描述】：

我开发了一个移动应用程序，它使用axios 连接到 API。它以前工作得很好。但现在这些 API 只能通过 VPN 访问，因为服务器受到限制。因此，我使用移动设备连接到 VPN，并使用浏览器成功访问了这些 API URL。但是打开 VPN 后，我无法通过移动应用访问相同的 API。它不允许我。因为，我可以从浏览器访问它们，我认为 VPN 连接还可以，但我不确定（服务器不是我的任务。它属于 devops）。

这是发送 axios 请求的方式。

return axios({
    method: 'POST',
    url: `${URL.URL_VAR}/api/oauth/oauth/token`,
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    data: bodyFormData
  }).then(function (response) {
    console.log("response" + response.status);
    return response;
  }).catch(function (response) {
    console.log("Get login error: " + JSON.stringify(response.message));
    return response;
  });

这是我的manifest.xml 文件。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  package="com.campaign">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <application
      android:networkSecurityConfig="@xml/network_security_config"
      android:usesCleartextTraffic="true" tools:targetApi="28"
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
        <uses-library android:name="org.apache.http.legacy" android:required="false"/>
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>
</manifest>

这是我的网络安全配置文件。

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <!-- For React Native Hot-reloading system -->
        <!-- If you are running on a device insert your computer IP -->
        <domain includeSubdomains="true">localhost</domain>
        <domain includeSubdomains="true">mydomain.io</domain>
        <trust-anchors>
            <certificates src="system" />
            <certificates src="user" />
        </trust-anchors>
    </domain-config>

    <base-config cleartextTrafficPermitted="false" />
</network-security-config>

在限制为 VPN 之前，所有这些都运行良好。

由于我是初学者，我应该寻找什么样的领域来解决这个问题？这是否与应用程序有任何关系，或者我是否必须更改服务器中的任何内容？请帮忙。

【问题讨论】：

当你从浏览器测试它是在本地 - 在同一个网络中？也许您的服务器有类似白名单的东西，并且设备必须在那里命名。
从浏览器测试时，它在同一个网络中。环境没变。我在网络安全配置文件中将服务器域列入白名单。但是，是的，我会看看我是否应该从服务器列入白名单。但我可以通过同一设备上的浏览器访问相同的 API。

标签： react-native vpn

【解决方案1】：

您的 vpn 是否为您的整个网络建立隧道？或者它是浏览器的内置 vpn？在 iOS 上，它会在顶部显示一个 VPN 徽标，而在 android 上，您的通知中心会有一个 vpn 客户端。否则流量不会通过 VPN 路由。

【讨论】：