无脚手架结构的Yesod项目如何配置cors跨域支持

非脚手架生成的Yesod应用本质是标准WAI应用，可直接使用wai-cors中间件实现CORS支持，不需要依赖脚手架生成的makeApplication方法或Application.hs文件结构。

操作步骤 #

1. 添加项目依赖 #

在项目的cabal描述文件或package.yaml的依赖段中加入两个包：

• wai
• wai-cors
  常规LTS快照已内置上述包，无需额外配置extra-deps。

2. 编写CORS中间件配置 #

在项目启动入口的代码中引入所需模块：

import Network.Wai (Middleware)
import Network.Wai.Handler.Warp (run)
import Network.Wai.Middleware.Cors
import Yesod

根据业务需求编写CORS规则，以下是适配当前REST接口的配置示例：

-- CORS资源策略
corsPolicy :: CorsResourcePolicy
corsPolicy = simpleCorsResourcePolicy
  { -- 开发环境可设为Nothing允许所有来源，生产环境请替换为允许的域名列表，例如Just (["https://your-frontend.com"], True)
    corsOrigins = Nothing
  , corsMethods = ["GET", "POST", "OPTIONS"] -- 覆盖路由中定义的所有请求方法
  , corsRequestHeaders = ["Content-Type", "Authorization"] -- 按需添加业务用到的自定义请求头
  , corsSupportsCredentials = False -- 如需跨域传递Cookie请改为True
  }

-- 生成CORS中间件
corsMiddleware :: Middleware
corsMiddleware = cors (const $ Just corsPolicy)

已经在路由定义中为/Hello接口声明了OPTIONS方法支持，无需额外编写OPTIONS接口的处理逻辑，wai-cors会自动拦截CORS预检请求并返回符合规范的响应。

3. 挂载中间件启动服务 #

非脚手架Yesod项目一般通过toWaiApp将自定义的App实例转为WAI应用后启动服务，只需要将CORS中间件包裹在生成的WAI应用外层即可，示例启动代码：

main :: IO ()
main = do
  -- 此处替换为项目原有的App初始化逻辑，比如加载配置、初始化数据库连接池等
  waiApp <- toWaiApp App
  -- 挂载CORS中间件后启动服务，端口替换为实际使用的端口
  run 3000 $ corsMiddleware waiApp

验证配置 #

服务启动后可通过curl发送预检请求验证配置是否生效：

curl -i -X OPTIONS http://localhost:3000/Hello \
  -H "Origin: http://test-frontend.com" \
  -H "Access-Control-Request-Method: POST"

若响应头中包含Access-Control-Allow-Origin、Access-Control-Allow-Methods相关字段，说明CORS配置已正常工作。

生产环境注意事项 #

• 禁止在生产环境使用corsOrigins = Nothing的全来源放行配置，必须明确指定信任的前端域名，避免跨域安全风险
• 若业务需要跨域传递Cookie，除了将corsSupportsCredentials设为True，还需要将corsOrigins配置为精确的域名列表，不能使用通配符
• 业务中用到的所有自定义请求头都需要添加到corsRequestHeaders列表中，否则会触发CORS预检失败

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