VueApollo跨域请求失败：Chrome正常Firefox报错求助

我帮你排查下这个Firefox专属的CORS问题——你的配置看起来大部分是正确的，但Firefox在CORS预检请求处理和缓存逻辑上有一些特殊要求，可能是这些细节导致了和Chrome的差异：

1. 完善CORS配置的预检请求支持 #

Chrome对预检请求的容错性更高，但Firefox要求更严格。你的Apollo Server CORS配置里需要明确包含OPTIONS方法，同时指定GraphQL请求所需的请求头：

修改服务端的cors配置：

const server = new ApolloServer({
  schema,
  cors: {
    origin: 'http://localhost:8080',
    methods: ['POST', 'OPTIONS'], // 明确添加OPTIONS方法（预检请求会用到）
    allowedHeaders: ['Content-Type', 'apollo-require-preflight'], // 允许GraphQL请求的必要头
    optionsSuccessStatus: 204,
    preflightContinue: false,
  },
})

解释：VueApollo发送的GraphQL POST请求通常会携带Content-Type: application/json和apollo-require-preflight头，Firefox的预检请求会验证这些头是否被允许，必须在配置中明确声明。

2. 清除Firefox的CORS预检缓存 #

Firefox会缓存预检请求的响应结果，即使你修改了服务端配置，旧的缓存可能依然生效。可以通过以下步骤清除：

• 在Firefox地址栏输入about:config，点击“接受风险并继续”
• 搜索network.cors.preflight_cache_size，将值改为0
• 重启Firefox，或者直接清除浏览器缓存（快捷键Ctrl+Shift+Del，选择“缓存”项清除）

3. 排查浏览器扩展干扰 #

部分Firefox的隐私、安全类扩展（比如uBlock Origin、Privacy Badger）可能会拦截跨域请求。建议暂时禁用所有扩展，测试请求是否正常，再逐个排查是哪个扩展导致的问题。

4. 验证Apollo Client的跨域凭证配置（可选） #

如果你的请求需要携带Cookie等凭证，可以给Apollo Client添加credentials配置（虽然Chrome正常，但Firefox对凭证的处理可能更严格）：

const apolloClient = new ApolloClient({
  uri: 'http://localhost:4000/v1/graphql',
  credentials: 'same-origin' // 如果客户端和服务端同域用这个，跨域需要用'include'并确保服务端允许credentials
})

注意：如果使用credentials: 'include'，服务端的CORS配置需要添加credentials: true：

cors: {
  // ...其他配置
  credentials: true,
}

先尝试前两个方案，这是Firefox CORS问题最常见的解决思路。如果还是不行，可以检查浏览器控制台的具体错误信息（比如是哪个响应头不匹配），再针对性调整。

内容的提问来源于stack exchange，提问作者Y. Russanov