使用 wai-cors 正确配置 CORS

Question

我正在为 Servant 和 CORS 配置而苦苦挣扎：我正在通过 Servant 公开 API，我有以下配置：

-- Wai application initialization logic
initializeApplication :: IO Application
initializeApplication = do
  let frontCors = simpleCorsResourcePolicy { corsOrigins = Just ([pack "https://xxxx.cloudfront.net"],  True)
                                           , corsMethods = ["OPTIONS", "GET", "PUT", "POST"]
                                           , corsRequestHeaders = simpleHeaders }
  return
    $ cors (const $ Just $ frontCors)
    $ serve (Proxy @API)
    $ hoistServer (Proxy @API) toHandler server

当我通过 Chromium（通过复制和粘贴）执行这样的查询时：

curl 'https://api.xxx/' \
  -H 'Accept: application/json, text/plain, */*' \
  -H 'Referer: https://xxx.cloudfront.net' \
  -H 'User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36' \
  -H 'Authorization: Bearer XXX==' \
  --compressed

它有效，但如果我在开发控制台中复制粘贴获取查询：

fetch("https://api.xxx", {
  "headers": {
    "accept": "application/json, text/plain, */*",
    "authorization": "Bearer XXX=="
  },
  "referrer": "https://xxx.cloudfront.net/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors",
  "credentials": "include"
});

我得到：

> Access to fetch at 'https://api.xxx' from origin 'https://xxx.cloudfront.net' 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.
polyfills-es2015.3eb4283ca820c86b1337.js:1 GET https://api.xxx net::ERR_FAILED
e.fetch @ polyfills-es2015.3eb4283ca820c86b1337.js:1
>  (anonymous) @ VM20:1
> x:1 Uncaught (in promise) TypeError: Failed to fetch

有什么提示吗？特别是为什么它适用于 cUrl 而不是 Chromium？提前致谢。

Answer 1

这是一个基本的 CORS 问题，事实上，发送 Authorization 而没有将其放入 corsRequestHeaders 会使请求被拒绝。

我应该写：

, corsRequestHeaders = ["Authorization", "Content-Type"]

使用 wai-cors 正确配置 CORS

Configure correctly CORS with wai-cors

haskell

cors

servant