React应用连接GraphQL时出现NetworkError错误的原因排查

你的问题核心是浏览器跨域资源共享（CORS）限制：React应用运行在3000端口，GraphQL服务在4000端口，属于不同源，浏览器默认会阻止这类跨域请求（GraphiQL能正常访问是因为它和服务端同端口4000，不存在跨域）。下面是两种可行的解决方案：

方案1：在Express服务端启用CORS支持 #

1. 安装cors依赖：

npm install cors

2. 修改server.js，引入并使用cors中间件：

const express = require('express');
const cors = require('cors'); // 新增
const expressGraphQL = require('express-graphql').graphqlHTTP;
const schema = require('./schema/schema');

const app = express();

app.use(cors()); // 允许所有跨域请求，也可指定源：app.use(cors({ origin: 'http://localhost:3000' }))

app.use('/graphql', expressGraphQL({
    schema,
    graphiql: true
}));

app.listen(4000, () => {
    console.log('Listening');
});

重启GraphQL服务后，React应用即可正常请求接口。

方案2：在React项目中配置代理 #

通过React开发服务器的代理功能转发请求，规避跨域限制：
在React项目的package.json中添加proxy字段：

{
  "name": "your-react-app",
  "version": "0.1.0",
  "proxy": "http://localhost:4000", // 新增
  // 其他原有配置...
}

同时修改Apollo Client的URI为相对路径：

export const client = new ApolloClient({
    uri: '/graphql', // 改为相对路径
    cache: new InMemoryCache(),
});

重启React开发服务器即可生效。

另外可确认两个服务均正常运行、URI无拼写错误，结合你描述的GraphiQL可用情况，核心问题就是跨域限制。

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