ApolloClient请求GraphQL API添加no-cors后中止问题求助

问题重现 #

一开始请求https://venia.magento.com/graphql时遇到CORS错误：

Access to fetch at 'https://venia.magento.com/graphql' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

添加mode: 'no-cors'后，请求被中止，出现新错误：

createHttpLink.ts:166 POST https://venia.magento.com/graphql net::ERR_ABORTED 500
ServerParseError: Unexpected end of JSON input at JSON.parse (<anonymous>) at parseJsonBody

错误原因分析 #

1. no-cors模式的致命问题：该模式下浏览器会限制对响应内容的访问，返回的是"不透明响应"，Apollo Client需要解析JSON响应体，但此时根本拿不到有效数据，必然解析失败；同时服务器可能因请求格式异常返回500。
2. 无效请求头设置：你在前端添加的Access-Control-Allow-Origin、Access-Control-Allow-Credentials是服务器端应返回的响应头，前端请求里加这些完全没用，反而可能干扰服务器处理。
3. Content-Type配置错误：Apollo Client默认用application/json格式发送请求（查询内容放在JSON的query字段中），你设置成application/graphql会让请求体格式不符合服务器预期，触发报错。
4. 查询语句可能存在问题：sku: {eq: ""}这种空字符串过滤条件可能不符合服务器的查询规则，也可能引发错误。

可行解决方案 #

方案1：配置前端反向代理（推荐，前端独立解决）

以Vite为例，在vite.config.js中添加代理配置，将本地/graphql请求转发到目标服务器，规避跨域问题：

// vite.config.js
export default {
  server: {
    proxy: {
      '/graphql': {
        target: 'https://venia.magento.com',
        changeOrigin: true,
        secure: true
      }
    }
  }
}

然后修改main.js中的请求地址为本地代理路径：

const httpLink = new HttpLink({
  uri: '/graphql', // 改为本地代理路径
  // 移除no-cors配置和无效headers
  headers:{
    // 仅保留必要的请求头（如认证信息，不需要可直接删除headers配置）
    // 'Authorization': 'Bearer xxx'
  }
})

方案2：修正请求配置（无法使用代理时）

• 彻底删除mode: 'no-cors'，该模式仅适用于无需读取响应的场景，完全不满足你的需求。
• 删除前端设置的Access-Control-Allow-Origin、Access-Control-Allow-Credentials请求头，这些是服务器的响应头，前端配置无效。
• 将Content-Type改回application/json，或直接删除该配置，让Apollo Client自动处理。

修正后的main.js核心代码：

const httpLink = new HttpLink({
  uri: 'https://venia.magento.com/graphql',
  // 移除fetchOptions中的mode配置
  headers:{
    // 仅保留必要请求头，无需求可直接删除整个headers配置
  }
})

方案3：修正GraphQL查询

调整查询中的过滤条件，或暂时移除filter先验证基础查询是否正常：

query products {
  products(pageSize: 5, currentPage: 3) {
    items {
      name
      sku
      price_range {
        minimum_price {
          regular_price {
            value
            currency
          }
        }
      }
    }
  }
}

总结 #

• 不要用no-cors模式解决CORS问题，这会导致无法获取响应数据。
• 前端设置CORS相关响应头完全无效，无需做无用功。
• 反向代理是前端解决跨域最可靠的方案，不依赖服务器配置。
• 确保请求格式和查询语句符合服务器要求，避免触发服务端错误。

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