React应用使用Apollo Client遇CORS错误，自定义请求头失效求助

核心问题分析 #

你设置fetchOptions.mode: 'no-cors'是错误的解决方案——这个模式下浏览器会强制限制请求行为：

• 无法自定义Content-Type: application/json这类非简单请求头，会被默认重置为text/plain
• 自定义的Authorization头会被忽略
• 响应会变成无法读取的"opaque"类型，完全不满足GraphQL的交互需求

正确解决步骤 #

1. 移除no-cors模式

首先删掉HttpLink中的fetchOptions配置，恢复正常请求模式：

const apiEndPoint = new HttpLink({
  uri: End_Point.GRAPHQL,
  // 移除fetchOptions配置
})

2. 修正代码笔误

你的client初始化中用了middleware变量，但实际定义的是authMiddleware，需修正：

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: concat(authMiddleware, apiEndPoint), // 把middleware改成authMiddleware
});

3. 后端配置CORS（推荐方案）

CORS问题的本质是浏览器同源策略限制，正确解决方式是在GraphQL服务器端配置允许前端域名的跨域请求：

• 允许前端的Origin（比如http://localhost:3000）
• 允许Content-Type、Authorization这类自定义请求头
• 允许POST、OPTIONS方法（OPTIONS是浏览器预检请求）

以Express后端为例，使用cors中间件的配置示例：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
  origin: 'http://localhost:3000', // 替换为你的React应用域名
  allowedHeaders: ['Content-Type', 'Authorization'],
  methods: ['POST', 'OPTIONS']
}));

// 挂载GraphQL路由
app.use('/graphql', /* 你的GraphQL中间件（如apollo-server-express） */);

4. 开发环境临时方案：使用代理

如果后端暂时无法修改配置，开发阶段可通过代理绕过CORS检查：

• Create React App项目：在package.json中添加代理配置：

  "proxy": "https://your-graphql-server-domain.com"
  

  然后将HttpLink的uri改为相对路径：

  const apiEndPoint = new HttpLink({
    uri: '/graphql', // 相对路径会被代理到proxy配置的地址
  })
  

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