CORS 预检响应与实际响应不匹配答案

【问题标题】：CORS preflight response doesn't match actual responseCORS 预检响应与实际响应不匹配
【发布时间】：2019-08-10 16:51:57
【问题描述】：

在我的 node.js 服务器中，我将 CORS 作为中间件包含在内，如下所示：

app.use(cors({ origin: 'http://<CORRECT_ORIGIN_URL>:3030', credentials: true }))

我在发送请求的应用程序中使用 Apollo Client，并在初始化 ApolloClient 时将凭据设置为“包含”，如下所示：

// Create a WebSocket link
const wsLink = process.browser ? new WebSocketLink({
    uri: `ws://<CORRECT_REQUEST_URL>:8000/graphql`,
    options: {
        reconnect: true,
    },
}) : null

// Create an http link (use batch, allow cookies response from server)
const httpLink = new BatchHttpLink({
    uri: 'http://<CORRECT_REQUEST_URL>/api/',
    credentials: 'include'
})


// Split terminating link for websocket and http requests
const terminatingLink = process.browser ? split(
    ({ query }) => {
        const { kind, operation } = getMainDefinition(query)
        return kind === 'OperationDefinition' && operation === 'subscription'
    },
    wsLink,
    httpLink,
) : httpLink

// Create Apollo client
const client = new ApolloClient({
    link: ApolloLink.from([authLink, errorLink, terminatingLink])
})

当我尝试登录时，我可以看到预检 OPTIONS 请求已发送并得到正确的响应：

请求标头（OPTIONS 请求）

Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Origin: http://<CORRECT_ORIGIN_URL>:3030
Referer: http://<CORRECT_ORIGIN_URL>/login

响应标头（OPTIONS 请求）

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: content-type
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Access-Control-Allow-Origin: http://<CORRECT_ORIGIN_URL>:3030
Connection: keep-alive
Content-Length: 0
Date: Wed, 20 Mar 2019 03:09:14 GMT
Server: nginx/1.15.5 (Ubuntu)
Vary: Origin, Access-Control-Request-Headers
X-Powered-By: Express

然而，当发送实际的 POST 请求时，我得到以下响应：

响应标头（POST 请求）

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Encoding: gzip
Content-Type: application/json
Date: Wed, 20 Mar 2019 03:09:15 GMT
Server: nginx/1.15.5 (Ubuntu)
Transfer-Encoding: chunked
Vary: Accept-Encoding, Origin
X-Powered-By: Express

I have no idea why the response headers are different in the post request when the options preflight show that it should be correct.

这个不正确的 POST 响应会导致客户端出现以下错误消息：

Access to fetch at 'http://<CORRECT_REQUEST_URL/api/' from origin
'http://<CORRECT_ORIGIN_URL>:3030' has been blocked by CORS policy: 
The value of the 'Access-Control-Allow-Origin' header in the response 
must not be the wildcard '*' when the request's credentials mode is
'include'.

我已尝试使用谷歌搜索并搜索 stackoverflow 以寻找解决方案，但找不到任何东西。有什么想法吗？

【问题讨论】：

标签： node.js express cors apollo apollo-server

【解决方案1】：

在我的 Express 服务前运行 apache2 代理时，我遇到了类似的问题。代理正在缓存一些（只有一些！）响应。这是我添加到 apache 配置中的内容，它解决了问题：

Header set Cache-Control "no-cache, must-revalidate"    env=no-cache-headers
Header set Pragma        "no-cache"                     env=no-cache-headers
Header set Expires       "Sat, 1 Jan 2000 00:00:00 GMT" env=no-cache-headers

【讨论】：

【解决方案2】：

我解决了我的问题。

问题是 Apollo Server 默认添加了 CORS 中间件，它覆盖了我的 CORS 设置。来自Apollo's documentation：

提供 false 以完全删除 CORS 中间件，或提供 true 以使用您的中间件的默认配置。

默认值为真。

为了解决这个问题，我只需要在 Apollo 中禁用 CORS 功能，只需在 .applyMiddleware 中设置 cors: false，如下所示：

server.applyMiddleware({
    app,
    path: '/',
    cors: false,
});

进一步参考：

https://github.com/expressjs/cors/issues/134#issuecomment-413543241

【讨论】：