“CORS例外情况”；飞行前响应中的访问控制允许标头不允许请求标头字段内容类型；在Apollo graphQL客户端中

我正在开发一个客户端web应用程序，它有一个清晰分离的后端/前端结构。后端是典型的graphQL服务器，前端的Apollo graphQL客户端用于进行查询

当应用程序部署到客户时，我开始注意到HTTP请求失败的增加。错误消息如下所示

在Chrome中，

无法获取

在Firefox中，尝试获取资源时，

NetworkError。

在Safari中，访问控制允许标头不允许请求标头字段内容类型。

在检查收集的客户端错误日志后，我发现这些错误发生在非常旧的浏览器版本上，例如Chrome 49~58、Firefox 57和Safari 10~11

这个问题似乎与CORS有关，而较旧的浏览器似乎有不同的行为。我试图通过将浏览器支持扩展到这样的范围，但没有帮助

---

我上过这样的帖子，它们都在谈论在服务器响应中向

访问控制允许头添加
内容类型
，但我认为我的情况有点不同，因为这只发生在较旧的浏览器版本上。如果我的后端对CORS的操作不正确，它将影响所有请求。
我成功地确定了罪魁祸首是阿波罗graphQL客户端在幕后使用的
fetch
API

当我试图在较旧的浏览器版本中重现此问题时，在控制台上观察到以下错误消息

Fetch API cannot load https://account.xxx.com/ap/sso?openid.pape.max_auth_age=3600&signIn...
Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

显然，正在重定向请求以进行SSO登录。这导致我怀疑API在发送请求时无法正确附加cookie，因此没有提供身份验证令牌

这一点在上得到确认，该公司仅在2017年8月将其默认凭证策略更改为同一来源。因此，在此之前发布的所有浏览器都不会包含cookie，除非另有规定

我跟踪了Apollo客户机的文档，并在下面添加了fetch选项，它开始像一个符咒一样工作

{凭证：“同一来源”}

另一个注意事项是，如果策略设置为
include
，则在HTTP响应中
Access Control Allow Origin
头不能设置为通配符匹配
*
的CORS情况下，会对后端服务器造成更严格的限制

在这种情况下，错误消息如下所示

在获取时访问'http://127.0.0.1:1234/graphql“起源”http://0.0.0.0:4321'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：当请求的凭据模式为时，响应中的'access control Allow Origin'标头的值不得为通配符'*'“包括”。
我认为这里学到的好东西是，在web应用程序中引入任何新内容时，浏览器支持都是一个需要注销的检查点，尽管这样做可能会很麻烦。