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

Question

我有一个在 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",

Answer 1

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

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