React JS + Apollo 客户端查询错误：“网络错误：无法获取”。从手机打电话时

Posted 2023-03-10

【中文标题】React JS + Apollo 客户端查询错误：“网络错误：无法获取”。从手机打电话时

【英文标题】：React JS + Apollo client query error: “Network error: Failed to fetch” . when call from mobile phone

【发布时间】：2019-12-03 02:47:11

【问题描述】：

我有一个在 Amazon 的 EC2 中运行的测试应用程序。它是一个带有 Apollo、GraphQl 和 Sequelize 的反应应用程序。它可以通过我笔记本的谷歌浏览器完美运行，但是当我从带有 android 的手机打开页面时，会出现此错误

错误网络错误：获取失败 localhost:9000/graphql:1 加载资源失败：net::ERR_CONNECTION_REFUSED

“react-apollo”的版本：“^2.5.6”

我的客户索引

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import RootSession from './App';
import * as serviceWorker from './serviceWorker';
import ApolloClient,  InMemoryCache  from 'apollo-boost';
import  ApolloProvider  from 'react-apollo';


const client = new ApolloClient(
    uri: "http://localhost:9000/graphql",
    fetchOptions:
      credentials: 'include'
    ,
    request: operation =>
      const token = localStorage.getItem('token');
      operation.setContext(
        headers:
          authorization:token ? token : null,
        
      )
    ,
    cache: new InMemoryCache(
      addTypename:false
    ),
    onError: (networkError,graphQLErrors,response,operation,forward)=>
      if (networkError)
        console.log("network",networkError) ;
      

      if (graphQLErrors)
        for(let err of graphQLErrors)
          switch (err.extensions.code)
            case 'UNAUTHENTICATED':                           
              localStorage.removeItem('token');  
          
        
      
    
  );


ReactDOM.render(
<ApolloProvider client=client> 
    <RootSession />
</ApolloProvider>, 
document.getElementById('root'));
serviceWorker.unregister();

我的服务器索引

import express from 'express';
import  ApolloServer, AuthenticationError  from 'apollo-server-express';
import  typeDefs  from './data/schema';
import  resolvers  from './data/resolvers';
import jwt from 'jsonwebtoken';
import dotenv from 'dotenv';
import db from "./models";

dotenv.config(path:'variables.env');


const app = express();

//const cors = require('cors');
//app.use(cors());
const addToken = async (req) =>


const server=  new ApolloServer(
    typeDefs,
    resolvers,

    context:async (req)=>
        const token = req.headers['authorization'];
        let currentUser = null;

        if (token !== 'null' && token !== 'undefined' && token !== '' && token !== null && token !== undefined)
            try           

                currentUser = await jwt.verify(token,process.env.SECRET);    
                req.currentUser = currentUser;

            catch (err)
                throw new AuthenticationError('Your session expired. Sign in again.');    
              
        
      return user:currentUser,db  ;
    
);

server.applyMiddleware(app);
app.listen(port:9000,()=> console.log(`Server Corriendo http://localhost:9000$server.graphqlPath`));

在我的服务器索引中，我也试过了

const cors = require('cors');
app.use(cors());

但我没有运气

我正在使用 serve -s build 服务客户端（服务 npm 包） 我使用 npm start 为服务器提供服务

怎么样，这条线可能会在手机中中断？ (本地主机)

 const client = new ApolloClient(
        uri: "http://localhost:9000/graphql",

【问题讨论】：

您能分享一下您使用的react-apollo 的版本吗？另外，你知道有问题的浏览器是否支持 fetch 吗？如果不是，您可能需要通过 polyfill 解决。 (apollographql.com/docs/link/links/http/#fetch)

是的，它的“react-apollo”：“^2.5.6”。浏览器是新的

可能是与null 的标头值相关的问题？ (github.com/apollographql/react-apollo/issues/…) authorization: token 是否总是在您的所有测试场景中定义？

不，不是这样。我认为这与我如何为客户端代码提供服务有关，但我不知道会是什么

【参考方案1】：

我认为问题在于您使用 localhost 作为您的服务器 URL。当您的浏览器在托管服务器的同一台机器上运行时，这是有效的，但当您在移动设备上运行客户端时，情况就不再如此了。尝试在客户端 URL 中使用用于托管服务器的机器的本地或公共 IP，例如 http://192.168.0.8:9000/。

这个答案有解释如何在linux上获取本地IP地址：https://***.com/a/13322549/11804768

【讨论】：

错误出现在我使用 localhost 的索引客户端中。我将它更改为具有正确端口的服务器的公共 IP，现在它可以工作了