React JS + Apollo 客户端查询错误:“网络错误:无法获取”.从手机拨打时

Question

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

错误

网络错误：无法提取
本地主机：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 构建(serve npm 包(为客户端提供服务我使用 npm 启动为服务器提供服务

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

 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