网络错误：无法获取离子反应答案

【问题标题】：Network error: Failed to fetch on ionic react网络错误：无法获取离子反应
【发布时间】：2021-03-08 08:15:10
【问题描述】：

这是我第一次在论坛上发帖，我真的需要你的帮助。我遇到了一个问题，我有一个 Ionic/React 应用程序、一个 Node.js 应用程序和一个 graphQL/Apollo API，当我从浏览器调用 graphql API 时，一切正常，但是当我使用电容器构建应用程序并在我的 Android 设备上运行它时，我收到“网络错误：无法获取”。

这是我设置 ApolloClient 的 client.ts 代码

import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache, NormalizedCacheObject } from 'apollo-cache-inmemory';

class RequestUtils {
clientApollo: any;

 constructor() {
     const httpLink = createHttpLink({
         uri: 'http://192.168.1.86:4000/graphql'
     });

     const authLink = setContext((req, { headers }) => ({
         headers: {
             ...headers
         }
     }));

     this.clientApollo = new ApolloClient({
         link: authLink.concat(httpLink),
         cache: new InMemoryCache()
     });
 }
}

const requestUtils = new RequestUtils();
const client: ApolloClient<NormalizedCacheObject> = requestUtils.clientApollo;

export default client;

这是我的 graphql.ts

import resolvers from "../resolvers/index";
import { ApolloServer, AuthenticationError } from "apollo-server-express";
import { getModels } from "../models/index";
import schemas from "../schemas/index";
import * as express from "express";
import * as cors from "cors";
import { connectToMongo } from "./config";
import { info, success, warning, error } from "./logger";

export class query {
    public app: any;
    constructor() {
        const models = getModels();
        this.app = express();
        this.app.use(cors());
        try {
            info("Starting connection to graphql");
            const server = new ApolloServer({
                typeDefs: schemas,
                resolvers,
                context: async ({ req }) => {
                    if (req) {
                        return {
                            models: models
                        };
                    }
                }
            });
            this.app = express();
            server.applyMiddleware({ app: this.app, path: "/graphql" });
            success(`Connected to graphql`);
        } catch (error) {
            warning(error);
        }
        this.app.listen(4000, () => {
            connectToMongo();
        });
    }
}

我认为这是 cors 或 ip 地址之类的问题，但我没有找到任何解决我的问题的方法。我希望有人可以帮助我！

编辑：

我尝试在另一台计算机上运行我的节点服务器，并使用我的 ionic react react webapp 从我的主计算机调用 graphql API。起源实际上是不同的，但没有错误，一切都完美无缺。但是在我的 android 设备上使用我构建的应用程序，总是同样的错误。

所以，我认为这不是 cors，也许是 Capacitor/cordova 或类似的东西。

一开始我还以为安卓app是不允许连接网络的，我查了一下，已经连接了，但是我不确定。

如果有人可以帮助我，那将是非常同情的，我真的被这个困住了，如果我无法连接到服务器和数据库，我的应用程序将毫无用处 XD

【问题讨论】：

标签： node.js reactjs ionic-framework apollo capacitor

【解决方案1】：

遇到了完全相同的问题。

看起来原因是Android默认禁止HTTP请求。

以下修复对我有用：

为了允许 http 请求，我将 android:usesCleartextTraffic="true" 添加到我应用的 AndroidManifest.xml 中

Solution post

【讨论】：

【解决方案2】：

我通过启动我的应用程序“解决”了我的问题“离子电容器运行 android -l --external” 如果应用程序正在生产中，我不知道会发生什么，但至少我可以在我的开发中取得进展。以后看看会发生什么¯_(ツ)_/¯

【讨论】：