Vapor搭配Next.js请求报CORS错误，已加Access-Control-Allow-Origin仍失效

Access-Control-Allow-Origin 属于响应头，是服务端返回响应时需要携带的字段，用于告知浏览器当前接口允许跨域访问的来源。你在前端请求头中添加该字段完全不符合CORS规则，不仅不会生效，还会因为自定义了非标准请求头触发浏览器的OPTIONS预检请求，进一步加重跨域问题。

1. 移除前端多余配置 #

删除axios请求头里的"Access-Control-Allow-Origin": "http://localhost:3000"配置，修改后的前端请求示例：

let cq = {
  text: "My question",
}; 
axios({
  method: "post",
  url: `http://localhost:8080/createQuestion`,
  data: cq,
  headers: {
    "Content-Type": "application/json",
  },
}).catch((err) => console.error(err));

2. Vapor后端配置CORS中间件 #

Vapor官方提供了成熟的CORS中间件，不需要手动写响应头，直接配置即可：

步骤2.1 配置CORS规则 #

打开Vapor项目的Sources/App/configure.swift文件，添加如下配置：

import Vapor

// 配置CORS规则
let corsConfig = CORSMiddleware.Configuration(
    // 允许的来源，开发阶段可以填`.all`，上线改为指定域名数组即可
    allowedOrigin: .any(["http://localhost:3000"]),
    // 允许的请求方法
    allowedMethods: [.GET, .POST, .PUT, .OPTIONS, .DELETE, .PATCH],
    // 允许的请求头
    allowedHeaders: [.accept, .authorization, .contentType, .origin, .xRequestedWith],
    // 是否允许携带凭证
    allowCredentials: true
)
// 初始化CORS中间件
let cors = CORSMiddleware(configuration: corsConfig)

// 注册中间件，必须放在所有中间件的最开头
app.middleware.use(cors, at: .beginning)

步骤2.2 重启Vapor服务 #

配置修改后重新编译启动Vapor后端，配置即可生效。

3. 验证配置是否生效 #

可以用curl命令发送请求，查看响应头是否携带对应字段：

curl -I -X OPTIONS -H "Origin: http://localhost:3000" -H "Access-Control-Request-Method: POST" http://localhost:8080/createQuestion

正常返回的响应头中会包含access-control-allow-origin: http://localhost:3000字段，此时前端跨域请求即可正常发送。

内容的提问来源于stack exchange，提问作者Zoltán Parragi