CORS异常“在飞行前响应中，Access-Control-Allow-Headers不允许请求报头字段内容类型".在Apollo graphQL客户端中 [英] CORS exception "Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response" in Apollo graphQL client
问题描述
我正在开发一个客户端渲染的React Web应用程序，该应用程序具有清晰的后端/前端结构.后端是典型的graphQL服务器，前端使用Apollo graphQL客户端进行查询.
I am developing a client side rendered React web application that has a clearly segregated backend/frontend structure. The backend is a typical graphQL server, and an Apollo graphQL client in the frontend is used to make queries.
将应用程序部署到客户后，我开始观察到HTTP请求失败的增加.错误消息如下所示.
When the app was deployed to customers, I started observing an increase in HTTP request failures. The error messages look like below.
在Chrome中，无法获取.
在Firefox中，尝试获取资源时出现 NetworkError..
In Firefox, NetworkError when attempting to fetch resource..
在Safari中，Access-Control-Allow-Headers不允许请求标头字段Content-Type..
In Safari, Request header field Content-Type is not allowed by Access-Control-Allow-Headers..
在检查客户端收集到的错误日志后，我发现这些错误日志发生在相当老的浏览器版本中，例如Chrome 49〜58，Firefox 57和Safari 10〜11.
Upon inspection on the client side error logs collected, I found that these occurred on pretty old browser versions, e.g. Chrome 49 ~ 58, Firefox 57 and Safari 10 ~ 11.
该问题似乎与CORS有关，并且旧版浏览器的行为似乎有所不同.我试图通过浏览器列表将浏览器支持扩展到此类范围，但这没有帮助.
The issue seems related to CORS and the older browsers seem to have a different behaviour. I tried to extend browser support to such ranges via browserslist but that didn't help.
I landed on posts like this which all talk about adding content-type to the Access-Control-Allow-Headers header in the server's response, but I think my situation is a bit different as this only occurs on older browser versions. If my backend were not acting correctly for CORS, it would affect all requests.
推荐答案
我设法找出罪魁祸首是Apollo graphQL客户端在后台使用的 fetch API.
I managed to identify the culprit to be the fetch API used behind the scene by the Apollo graphQL client.
当我尝试在旧版本的浏览器中重现该问题时，在控制台上观察到以下错误消息.
When I tried to reproduce the issue in older browser versions, below error message was observed on the console.
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，因此未提供身份验证令牌.
Apparently the request is being redirected for SSO login. That led to me to suspect that the API was not able to attach the cookies properly when sending in the request, hence no auth token was provided.
这已在获取API文档中得到确认只是在2017年8月将其默认凭据策略更改为 same-origin .因此，除非另行指定，否则在此之前发布的所有浏览器都不会包含cookie.
This is confirmed on the Fetch API doc that it only changed its default credential policy to same-origin in August 2017. Hence all browsers released before that won't include cookies unless specified otherwise.
我遵循了高级HTTP网络文档，Apollo客户端并包含在fetch选项下面，它开始像魅力一样工作.
I followed the advanced HTTP networking doc of the Apollo client and included below fetch option, and it started working like a charm.
{凭据:相同来源"}
一个旁注是，如果该策略设置为 include ，则在 Access-Control-Allow-Origin 的CORS情况下，它将对后端服务器施加更严格的限制>标头不能在HTTP响应中设置为通配符匹配 * .
A side note is that if the policy is set to include, it poses a stricter limit on the backend server in CORS situations where the Access-Control-Allow-Origin header cannot be set to wildcard match * in the HTTP response.
在这种情况下，错误消息如下所示.
The error message would look like below in such situation.
无法从起源'http://0.0.0.0:4321'访问'http://127.0.0.1:1234/graphql'的访问权限已被CORS策略阻止:对预检请求的响应未收到通过访问控制检查:请求的凭据模式为包括"时，响应中"Access-Control-Allow-Origin"标头的值不得为通配符"*".
这篇关于CORS异常“在飞行前响应中，Access-Control-Allow-Headers不允许请求报头字段内容类型".在Apollo graphQL客户端中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
