如何在Suave中处理OPTIONS请求？跨域POST异常排查

我帮你排查了下Suave的配置问题，核心是OPTIONS预检请求没有被正确处理，同时CORS头的设置也存在疏漏。以下是具体的修复方案：

1. 修正CORS头的配置 #

你之前重复使用addHeader设置Access-Control-Allow-Headers会导致后面的配置覆盖前面的，应该把多个需要允许的请求头合并成一个值。另外要确保覆盖所有必要的字段：

let setCORSHeaders =
    addHeader "Access-Control-Allow-Origin" "*"
    >=> setHeader "Access-Control-Allow-Headers" "token, content-type" // 合并多个请求头
    >=> addHeader "Access-Control-Allow-Methods" "GET, OPTIONS, POST, PUT"

2. 单独处理OPTIONS预检请求 #

OPTIONS请求是浏览器发起的预检请求，不需要执行业务逻辑，只需要返回正确的CORS头和200状态码即可。你之前把OPTIONS指向业务接口是错误的，应该单独处理：

// 处理所有OPTIONS请求，返回CORS配置和空响应
let handleOptions =
    OPTIONS >=> fun context ->
        context
        |> setCORSHeaders
        |> Successful.OK "" // 返回空内容，确保状态码为200

3. 调整主WebPart的结构 #

要确保CORS头对所有请求生效，并且OPTIONS请求被优先处理：

// 对所有请求应用CORS头
let allowCors = setCORSHeaders

let app = 
    statefulForSession 
    >=> allowCors // 全局应用CORS头
    >=> choose [
            handleOptions; // 先处理OPTIONS预检请求
            GET >=> choose [
                // 你的GET路由配置
            ]
            POST >=> choose [
                // 其他POST路由
                path "/api/password/test" >=> apiController.passwordTest
            ]
        ]

问题根源分析 #

• 原来的allowCors只针对GET请求设置头，POST和OPTIONS请求没有拿到正确的CORS配置
• OPTIONS请求被错误绑定到了业务接口，而预检请求只需要返回CORS规则即可
• Access-Control-Allow-Headers被重复设置，导致丢失了token或content-type其中一个字段

验证修复效果 #

修改完成后，Chrome的OPTIONS请求应该会返回和Flask类似的完整响应头：

Status Code: 200 OK
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: token, content-type
Access-Control-Allow-Methods: GET, OPTIONS, POST, PUT

此时Elm的POST请求就能正常通过预检，完成后续的请求流程了。

内容的提问来源于stack exchange，提问作者onemorecupofcoffee