Add route option for CORS

[peterdee]

Hi.

I could not find any examples of the Pogo server / route with enabled CORS.

Here's a couple of examples for a CORS-enabled route:

1. When using the Toolkit:

server.route({
  handler: (request: Request, tk: Toolkit): Response => {
    const response = tk.response({ info: 'OK' });
    response.headers.append('access-control-allow-origin', '*');
    response.headers.append(
      'access-control-allow-headers',
      'Origin, X-Requested-With, Content-Type, Accept, Range',
    );
    return response.code(200);
  },
  method: 'GET',
  path: '/cors',
});

2. When using the request.response:

server.route({
  handler: (request: Request, tk: Toolkit): Response => {
    request.response.headers.append('access-control-allow-origin', '*');
    request.response.headers.append(
      'access-control-allow-headers',
      'Origin, X-Requested-With, Content-Type, Accept, Range',
    );
    request.response.body = {
      info: 'OK',
    };
    return request.response;
  },
  method: 'GET',
  path: '/cors',
});

I think this can be added to the documentation.

[sholladay]

I want the framework to handle CORS automatically, as it's fairly complex. We will add CORS support to the framework and you'll be able to enable it with a cors: true route option. See hapi for reference: https://github.com/hapijs/hapi/blob/master/API.md#-routeoptionscors

PR welcome, otherwise I'll get around to it when I have time.

[peterdee]

Ok, got it.

The code that I provided above works fine, I guess I will use it as a workaround for now.

You can close this.

[vivekchauhan12000]

is automatic CORS handling is applied?

[sholladay]

This issue remains open because no one has worked on adding the feature yet. Are you interested in working on it, @vivekchauhan12000?

[vivekchauhan12000]

Yes I will

[KaKi87]

Hello, any news on this ? Thanks

[sholladay]

@KaKi87 No one has picked this up yet. It isn't something I personally need, so I recommend submitting a PR for it if you need it any time soon.

[KaKi87]

Well, here's what I had to do for my use case.

I would love to have something as simple as fastify.register(require('fastify-cors'));, but I don't know to do such thing, plus I don't do TypeScript.

[sholladay]

It will be even simpler than that. It will work like this:

pogo.server({ cors : true });

To implement it in Pogo, you'll just need to call response.header() internally and set the appropriate headers as per the specification. Writing the code should be pretty easy, it's just that the spec has a number of special cases. We can start with a partial implementation instead of doing it all at once if you'd like.

As for TypeScript, you'll only need to add cors: Boolean to the server options interface. Everything else will be internal and you can use as much or little TypeScript as you are comfortable with. Feel free to write it in plain JavaScript. I can help with improving the type safety of the internal code.

[KaKi87]

For Access-Control-Expose-Headers, Access-Control-Allow-Methods, and Access-Control-Allow-Headers response headers the value * counts as a wildcard

Those three, then ?

Also, it's not only about adding headers to each endpoint, but also creating an OPTIONS one for each.

[KaKi87]

Hello ?

[sholladay]

Hi, @KaKi87. I'm not sure we should include Access-Control-Expose-Headers by default. Also, I think it would be best to reflect the exact requested origin, method, and headers back to the client instead of using a * wildcard. But generally yes, that's what I'm thinking.

The cors: true setting should cause the server to respond to preflight requests with:

Access-Control-Allow-Origin: <origin>
Access-Control-Allow-Methods: <methods>
Access-Control-Allow-Headers: <headers>

For requests to the actual resource, the server only needs to send Access-Control-Allow-Origin, and ideally also Vary: Origin.