React客户端连接Express服务器GraphQL API时出现网络错误求助

Hey there, let's break down how to troubleshoot this Network error: Failed to fetch issue when connecting your React client to an Express GraphQL API. I've run into this exact problem plenty of times, so here are the most common fixes to check off one by one:

This is the #1 culprit 90% of the time. Browsers block cross-origin requests by default, so your Express server needs to explicitly allow requests from your React app's domain.

• Install the cors middleware if you haven't already:

  npm install cors
  

• Add it to your Express setup. For local development, you can allow all origins temporarily:

  const cors = require('cors');
  const express = require('express');
  const app = express();
  
  app.use(cors()); // Allows all origins (great for dev, not production)
  

• For production, lock it down to your React app's actual URL:

  app.use(cors({ origin: 'https://your-react-app-domain.com' }));
  

It's easy to typo the URL or miss the /graphql path. Let's verify:

• If you're using Apollo Client, make sure the uri points to the correct endpoint:

  import { ApolloClient, InMemoryCache } from '@apollo/client';
  
  const client = new ApolloClient({
    uri: 'http://localhost:4000/graphql', // Match your Express server's port and path
    cache: new InMemoryCache(),
  });
  

• If you're using raw fetch, ensure the URL is right and you're using POST:

  fetch('http://localhost:4000/graphql', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query: `query { yourQuery }` }),
  });
  

Sometimes the simplest fix is the easiest to miss:

• Check your Express server's terminal window. Is it showing logs like Server running on port 4000 or GraphQL endpoint ready at /graphql?
• If it crashed, look for error messages (like port conflicts or schema syntax errors) and restart it.
• Make sure you're not using the wrong port—React defaults to 3000, so Express should be on a different one (like 4000).

Browsers block "mixed content" (HTTPS app calling HTTP API) for security:

• If your React app is running on HTTPS (common in production or some dev setups), your Express server needs to use HTTPS too. For local dev, you can temporarily allow insecure content in Chrome: click the lock icon in the address bar → Site settings → Set "Insecure content" to Allow.
• For production, ensure both your React app and Express API use the same protocol (HTTPS).

GraphQL expects specific request formatting, even if you're using a client library:

• Always use the POST method (GET works for simple queries but is less reliable).
• Set the Content-Type header to application/json.
• The request body must be a JSON object with a query field (and variables if needed):

  {
    "query": "query GetUser($id: ID!) { user(id: $id) { name email } }",
    "variables": { "id": "123" }
  }
  

If your React app uses a Content Security Policy (CSP), it might be blocking requests to your Express API:

• Open your browser's dev tools → Console tab. Look for CSP-related error messages.
• Update your CSP to allow connections to your API domain. For example, add this to your CSP header:

  connect-src 'self' http://localhost:4000;
  

• Local dev: Ensure your firewall isn't blocking the port your Express server is using (e.g., 4000).
• If you're using React's proxy feature (in package.json), make sure the proxy URL matches your Express server:

  {
    "proxy": "http://localhost:4000"
  }
  

  With this set, you can call /graphql directly in React instead of the full URL.

If none of these work, open your browser's Network tab in dev tools, trigger the request, and look at the details:

• What's the status code? (404 means wrong endpoint, 500 means server error, etc.)
• Are there any response headers indicating CORS or other issues?

These details will help narrow down the problem even further.

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