在 Suave 中允许多个 headers 与 CORS

Question

我正在尝试让我的 Suave API 接受 CORS 请求。我在这里关注了这个片段：

http://www.fssnip.net/mL/title/CORS-response-with-Suave

我将在这里重新创建：

let setCORSHeaders =
    setHeader  "Access-Control-Allow-Origin" "*"
    >=> setHeader "Access-Control-Allow-Headers" "content-type"

let allow_cors : WebPart =
    choose [
        OPTIONS >=>
            fun context ->
                context |> (
                    setCORSHeaders
                    >=> OK "CORS approved" )
    ]

let webSite =
    choose [
        allow_cors
        GET >=> OK "URLs are for wimps. GETting something? This is what you get."
    ]

但现在我有需要传入令牌的端点，并且这些端点由于在 CORS 中缺少允许的 header 而出现错误。我的令牌 header 只是 "token"，所以我尝试了两种方法，但都没有解决问题。

尝试 #1

    setHeader  "Access-Control-Allow-Origin" "*"
    >=> setHeader "Access-Control-Allow-Headers" "content-type"
    >=> setHeader "Access-Control-Allow-Headers" "token"

这返回了一个错误，说 content-type 不再被接受 - 这似乎暗示最后一个 setHeader 覆盖了第一个，当您在此处查看源代码时：https://github.com/SuaveIO/suave/blob/master/src/Suave.Tests/HttpWriters.fs ，在第 113 行，有一个测试对我来说意味着这是所需的行为。

尝试 #2

基于对这个问题的回答：，我试图通过 comma-separated 列表设置两个 header：

    setHeader  "Access-Control-Allow-Origin" "*"
    >=> setHeader "Access-Control-Allow-Headers" "Content-Type,token"

但这随后给出了一个错误，表明 CORS 完全失败了：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 401.

同样基于同样的问题，我尝试了以下方法：

    setHeader  "Access-Control-Allow-Origin" "*"
    >=> setHeader "Access-Control-Allow-Headers:content-type" "Accept"
    >=> setHeader "Access-Control-Allow-Headers:token" "Accept"

给出了这个回复：Request header field token is not allowed by Access-Control-Allow-Headers in preflight response.

那么，如何在 Suave 的 CORS 请求中允许任意数量的 header？

编辑

尝试 #3

我用了 addHeader 而不是 setHeader:

let setCORSHeaders =
    setHeader  "Access-Control-Allow-Origin" "*"
    >=> addHeader "Access-Control-Allow-Headers" "content-type"
    >=> addHeader "Access-Control-Allow-Headers" "token"

现在说... No 'Access-Control-Allow-Origin' header is present on the requested resource.

如果我将第一个 setHeader 更改为 addHeader，我仍然会得到相同的响应。

修复

    addHeader  "Access-Control-Allow-Origin" "*" 
    >=> setHeader "Access-Control-Allow-Headers" "token" 
    >=> addHeader "Access-Control-Allow-Headers" "content-type" 
    >=> addHeader "Access-Control-Allow-Methods" "GET,POST,PUT"

完成工作 - 在此之后，发送的内容出现问题，但 CORS 本身没有其他问题。

Answer 1

尝试使用 addHeader 而不是 setHeader。在您找到的单元测试中再往下几行，有一个 addHeader 的测试表明它具有您正在寻找的语义，其文档说：

Adds the header key with the given value to the list of returned headers, even if that header already exists. This means that Suave will serve a a response with the header denoted by key with possibly different values.

这看起来像您想要的行为。

Answer 2

我遇到了类似的问题。由于遗留原因，即使 Suave 2.2.1 可用，我目前仍坚持使用版本 1.1.3。我对 F# 不是很熟悉，但最终我设法用这样的东西让它工作：

let setCORSHeaders =
    addHeader  "Access-Control-Allow-Origin" "*" 
    >=> setHeader "Access-Control-Allow-Headers" "token" 
    >=> addHeader "Access-Control-Allow-Headers" "content-type" 
    >=> addHeader "Access-Control-Allow-Methods" "GET,POST,PUT" 

let app =
    choose [
        GET >=>
            fun context ->
                context |> (
                    setCORSHeaders
                    >=> choose
                        [ pathRegex "(.*?)\.(dll|mdb|log)$" >=> dllFilesRequest
                        pathRegex "(.*?)\.(html|css|js|png|jpg|ico|bmp)$" >=> staticFilesRequest

                        path "/" >=> indexRequest
                        path "/index" >=> indexRequest
                        path "/static" >=> staticFilesRequest
                        // ...
                        ] )

        POST >=>
            fun context ->
                context |> (
                    setCORSHeaders
                    >=> choose
                        [
                        path "/something" >=> runSomething
                        // ...
                        ] )
    ]

我确定有更好的方法。

在 Suave 中允许多个 headers 与 CORS

Allow multiple headers with CORS in Suave

f#

suave