GraphQL Server无法通过IP地址访问（localhost访问正常）

当前遇到的是两个独立的配置问题，互不影响：

1. Apollo Studio的报错属于浏览器混合内容安全拦截：线上Apollo Studio是HTTPS协议，本地GraphQL接口是HTTP协议，浏览器默认安全策略禁止HTTPS页面向非HTTPS接口发起请求，因此无法完成接口内省。
2. Expo应用无法通过局域网IP访问后端，通常是服务监听范围、网络连通性、平台请求限制三类配置不匹配导致。

修复Apollo Studio无法内省接口的问题 #

没必要硬用线上HTTPS版的Studio，直接在本地Apollo Server中嵌入本地运行的Sandbox即可，完全不存在跨协议拦截问题：

• 针对Apollo Server 3及以上版本，先引入本地着陆页插件，修改服务配置：

const { ApolloServerPluginLandingPageLocalDefault } = require('@apollo/server/plugin/landingPage/default');

const server = new ApolloServer({
  typeDefs,
  resolvers,
  plugins: [ApolloServerPluginLandingPageLocalDefault({ embed: true })],
});

• 重启服务后直接访问http://localhost:4000，打开的就是本地运行的Sandbox控制台，所有请求同域同协议，不会有拦截问题。
  如果一定要使用线上版Studio，需要给本地服务配置自签HTTPS证书并在系统信任链中添加信任，本地开发场景完全没必要，不推荐折腾。

修复Expo应用无法通过局域网IP访问后端的问题 #

按以下顺序逐一排查配置：

• 调整服务监听地址：绝大多数后端服务默认只监听127.0.0.1环回地址，仅支持本机访问，局域网内其他设备无法连通。启动服务时必须指定监听host为0.0.0.0，让服务监听所有网卡的请求：

// Apollo Server启动配置示例
server.listen({
  port: 4000,
  host: '0.0.0.0' // 必加配置
});

配置完成后先在本机浏览器访问http://192.168.X.X:4000，确认能正常打开页面再进行后续排查。

• 确认网络连通性：运行Expo的手机/模拟器必须和后端所在电脑连接同一个局域网，不能跨VLAN、不能一端连内网一端连访客WiFi。如果使用安卓模拟器，访问宿主机服务不要用局域网IP，改用模拟器专属映射地址10.0.2.2:4000；iOS模拟器可以直接用127.0.0.1:4000访问宿主机服务，不需要走局域网IP。
• 放行防火墙端口：检查电脑系统防火墙（Windows Defender、macOS自带防火墙、第三方安全软件），可以临时关闭防火墙测试连通性，如果关闭后能正常访问，给4000端口添加入站方向的允许规则即可。
• 关闭Expo明文请求拦截：Expo默认在安卓、iOS平台会阻止明文HTTP请求，需要修改项目根目录下的app.json添加对应配置：

{
  "expo": {
    "android": {
      "usesCleartextTraffic": true
    },
    "ios": {
      "infoPlist": {
        "NSAppTransportSecurity": {
          "NSAllowsLocalNetworking": true,
          "NSAllowsArbitraryLoads": true
        }
      }
    }
  }
}

修改配置后重启Expo服务，重新加载应用即可正常对接。

内容的提问来源于stack exchange，提问作者Dhaval Jardosh