unjs/nitro - 速查攻略不废话之跨域

根据官网内容，只需要在nitro.config.ts中做如下配置：

export default defineNitroConfig({
  routeRules: {
    '/**': { cors: true },
  },
})

虽然我很想说这样就解决了，但目前版本v2.9.7这并不完全生效（怒！），在文件下载、预载等情况下仍然可能会报跨域相关问题。

让我们移除上面的配置，从头开始。如果哪个版本解决了这个配置项问题，还请call我，我会尽快更新文章。

根据unjs/h3，可以使用handleCors函数解决跨域问题，请看示例:

// routes/foo.ts

export default defineEventHandler((e) => {
  handleCors(e, {
    origin: '*',
    methods: '*',
    allowHeaders: '*',
  })
  
  // ...
})

这是最宽泛的同源策略，其他配置项、配置内容请看unjs/h3的文档，自行处理。

当然，在每个需要使用到的接口中都要这么处理一遍是非常繁琐的，让我们在中间件中处理：

// middleware/cors.ts

export default defineEventHandler((e) => {
  handleCors(e, {
    origin: '*',
    methods: '*',
    allowHeaders: '*',
  })
})

几乎一样的代码！你也可以在这个中间件中做出一些限制，比如根据路由选择性处理跨域问题，就像这样：

// middleware/cors.ts

export default defineEventHandler((e) => {
  const whiteList = [
    '/foo'
  ]
  if(!whiteList.some(route => e.path.startsWith(route)))
    return
  
  handleCors(e, {
    origin: '*',
    methods: '*',
    allowHeaders: '*',
  })
})

报告完毕！