Question: how to setup a proxy server (in development mode)

[max-l]

I'm developing a static site that needs to make client side rest call to another site,
In production, the site will be served by nginx, and it will have the proper CORS header.

In dev mode, I would like the lume server to setup CORS correctly,
and I would also like to intercept calls to the dev server.

The doc shows how to create the lume server:
https://lume.land/docs/core/server/

I tried it (the first example), but when started, it only serves static pages,
I need it to do the same as "deno task lume -s", but with more configurability.

[oscarotero]

You can use a middleware to setup CORS headers. Middlewares in Lume are just functions with the following signature:

type Handler = (request: Request) => Promise<Response>;

async function middleware (request: Request, next: Handler): Promise<Response> {
  return await next(request);
});

Packages by httpland use the same signature for middlewares so probably you can use their cors_protocol module as following (I didn't try it):

import { withCors } from "https://deno.land/x/cors_protocol@$VERSION/mod.ts";

async function corsMiddleware(request, next) {
    const response = await next(request);
    return withCors(request, response);
}

To use this middleware in the local server (with deno task lume -s), just add it in your _config.ts file:

import lume from "lume/mod.ts";
import cors from "./_middlewares/cors.ts";

const site = lume({
  server: {
    middlewares: [cors]
  }
});

export default site;

[max-l]

Hmmm, I tried dozens of incantations, and can't get any to work.

I also tried to adapt some of the examples found here:

https://deno.land/x/cors@v1.2.2#simple-usage-enable-all-cors-requests

I'm lost.

import lume from "lume/mod.ts";
import esbuild from "lume/plugins/esbuild.ts";
import sourceMaps from "lume/plugins/source_maps.ts";
import { withCors } from "https://deno.land/x/cors_protocol/mod.ts";

async function corsMiddleware(request, next) {
    const response = await next(request);
    return withCors(request, response);
}

const site = lume({
    server: {
        middlewares: [corsMiddleware]
    }
});
...

[oscarotero]

I'm not an expert of CORs configuration, but I assume you want the local server (started with deno task lume -s) to send the responses with some additional HTTP headers, right?

What's exactly the problem?

• The middleware doesn't add any additional header?
• Or the middleware add some headers but that isn't enought to have CORS configurated propertly?

[max-l]

The headers don't get added (I don't see them in the chrome console).

The logic is quite simple, here's how it's done with other servers: https://supabase.com/docs/guides/functions/cors

or with nginx: https://serverfault.com/questions/162429/how-do-i-add-access-control-allow-origin-in-nginx

Being a deno begginer (as well as a lume beginner), I'm strugling to implement this in Lume. I could perhaps try to first implemente it in "plain deno", probably with a middleware,

Do Lume middleware functions have the same function signature and work the same way, as deno middleware functions ?

In other words, can a "plain deno server" middleware just be "dropped in" a Lume development server config ?

That would certainly make things easyer, then the problem of "how to setup CORS in Lume" become "how to setup CORS in Deno", and I ask the question to a wider audience.

Meanwhile (while I figure this out), a nice work around would be to just add a route to the development server, so I can serve certain requests from the lume dev server, and proxy the request.

In general, it would be nice to be able to add custom routes in the dev server.

Thanks a lot for the help BTW, I like the minimalism of Lume (and Deno). I've been using gatsby for years, it is also quite minimalist, but it's become too bloated to my taste.

[oscarotero]

@max-l Ok, sorry. I just catched a bug in Lume server that removes the headers of responses. It only happens to HTML responses, so probably you can see the headers in other non-HTML responses (images, JS or CSS files).

I've fixed it but cannot release yet a new stable version of Lume because I'm in the middle of other changes. I will do in a few days.

If you want to test it, you can use the current development version (upgrade with deno task lume upgrade --dev to use the last commit of Lume).

After upgrading, you can add any header in this way:

async function addXHeader(request: Request, next: (request: Request) => Promise<Response>) {
  const response = await next(request); // Get the response
  response.headers.set("X-Header", "lume"); // Add a header
  return response;
}

const site = lume({
  server: {
    middlewares: [addXHeader],
  },
});

Do Lume middleware functions have the same function signature and work the same way, as deno middleware functions ?

AFAIK there's no "Deno middleware functions". There are some frameworks that accept middlewares but with a custom implementation signature. I think the most plain signature for middlewares is Lume, because it's a plain function with standard Request and Response classes. There was some attempts to create a official Middleware type (denoland/std#1295) but nothing has come of it yet.

[oscarotero]

@max-l I just released a new version of Lume that fixes this bug. So after upgrading to v1.16.0, it should work fine. Let me know if don't.

[max-l]

Thanks !