Cors?

[JuanCaicedo]

Hi there! I'm trying to use fs-router but am having problems with needing to set up an OPTIONS route. Some more details.

I've used fs-router to set up a POST route at /sync. I've used micro-cors to set up cors. However when I send a request from my client, I see a 404 at OPTIONS /sync. This is because the browser sends an OPTIONS preflight request to the server first.

I think the solution would be to set up an OPTIONS handler as well, but I'm not sure what to do there. Have you ever encountered this problem, or do you have any other suggestions for doing cors with fs-router?

[JuanCaicedo]

Never mind, I was able to get it working along these lines

const { send } = require('micro')
const cors = require('micro-cors')()

const POST = async (req, res) => {
  send(res, 200, { status: 'OK' })
}

module.exports = {
  POST: cors(POST),
}

[JuanCaicedo]

Sorry, I think I had some problems with how the browser cached the results of those requests. I think this is the code that works

const { send } = require('micro')
const cors = require('micro-cors')()

const POST = async (req, res) => {
  send(res, 200, { status: 'OK' })
}

module.exports = {
  POST: cors(POST),
  OPTIONS: cors((req, res) => send(res, 200)),
}

This puts me back to thinking, should we manually have to match the options route? I think both express cors and micro-cors don't have to do that.

This might be a feature request you don't want to deal with. If you feel okay with users just adding the above OPTIONS, feel free to close this issue 😀

[jesseditson]

This is interesting! When I've added cors to fs-router projects in the past, I'll usually install the cors handler on the base route, which will handle adding the OPTIONS requests - something like this:

// index.js
const { send } = require('micro')
const cors = require('micro-cors')()
let match = require('fs-router')(__dirname + '/routes')

module.exports = cors(async function(req, res) {
  let matched = match(req)
  if (matched) {
    try {
      return await matched(req, res)
    } catch (e) {
      console.error(e.stack)
      return send(res, 500, { error: `Server error: ${e.message}` })
    }
  }
  send(res, 404, { error: 'Not found' })
})

But I could see it being useful to only install cors handlers on a specific route - what would you imagine that API looking like? Off the top of my head, it seems like it may be a bit overkill to reflect the route to figure out if it wants an OPTIONS handler, but I'm probably just not thinking of the simpler solution!