Skip to content

跨域处理

浏览器的同源策略限制跨源脚本读取响应。CORS 通过响应头声明允许的来源、方法和请求头;它不是服务端鉴权机制。

bash
pnpm add cors

限制允许来源

不要在需要 Cookie 或凭据的接口上使用任意来源。将可信前端地址显式加入白名单。

js
import cors from 'cors'

const allowedOrigins = new Set(['https://app.example.com', 'http://localhost:5173'])

app.use(
  cors({
    origin(origin, callback) {
      if (!origin || allowedOrigins.has(origin)) {
        return callback(null, true)
      }

      callback(new Error('不允许的来源'))
    },
    methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'],
    allowedHeaders: ['Content-Type', 'Authorization'],
  }),
)

跨站请求需要同时满足:服务端设置 credentials: true,且 origin 为明确的来源,不能使用 *;客户端使用 fetch 时设置 credentials: 'include'。Cookie 本身还需配置合适的 SameSiteSecureHttpOnly 属性。

js
app.use(
  cors({
    origin: 'https://app.example.com',
    credentials: true,
  }),
)

基于 MIT 许可发布