0

I have a Rest API made with Koa with some routes, but, at the same time, it will serve my Front (made with a JS framework and its own router).

The fact is, when I access from a browser "localhost/user" I want to display the front but when I reach the same url from fetch / ajax / XMLHttpRequest I want to display a JSON result (the one gave by the Koa-router).

So I would like to enable the /user route from the API only if it's called from XHR.

I did my isXMLHttpRequest middleware like this :

module.exports = async (ctx, next) => {
    if(ctx.request.get('X-Requested-With') === 'XMLHttpRequest') {
        return next()
    }
}

Then, in my koa-router I did something like :

const Router = require('koa-router')

const isXMLHttpRequest = require("@middlewares/isXMLHttpRequest")

const router = new Router()

const user = require("@routes/user")
router.use('/user', isXMLHttpRequest, user.routes(), user.allowedMethods())

And then, it works when I do some XHR request, I have the JSON as planned, but if I try to access the /user from the browser, the API is giving me a Not Found Error and not my front...

I was looking on how to skip the router.use function if the request isn't made in XHR, but I can't find a solution...

I think it's in the middleware else condition, I have to return something, but what can I do to skip the koa-router from giving me 404 ...

Maybe you can help me ?

Simon Trichereau
  • 721
  • 11
  • 19

2 Answers2

0

Not sure If I got your question right. So you have a backend that acts like a static web server AND a REST API, right?.

I would try to do it the other way round. Using e.g koa-static (https://www.npmjs.com/package/koa-static) would FIRST try to serve your files and if no matching files are found in your defines public directory, all other routes (so your REST API) are handled. Then you only have to make sure, that endpoint names do not overlap with files you are serving.

Sebastian Hildebrandt
  • 2,661
  • 1
  • 14
  • 20
  • Yes, that's why I tried to explain ... Making only one web server wich serve a static front made with a JS Framework and his own router, and at the same time, a REST API. But the front and the API were using some same routes (ex: user) so I tried to diferenciate them with XHR ... As I could'nt reach what I wanted, I finally put a prefix on my API routes like this : `/api/user` – Simon Trichereau Mar 14 '21 at 19:15
0

OK, so if you are using the SAME routes for static and XMLHttpRequests (which is probably not the best strategy), then this could work:

const Koa = require('koa')
const Router = require('koa-router')

const app = module.exports = new Koa();

isXmlRequest = (ctx) => {
    // here you could also compare e.g. "accept" header
    return (ctx.request.header && ctx.request.header['x-requested-with'] === 'XMLHttpRequest');
}

// static routes
const staticRouter = new Router()
staticRouter.get('/user', (ctx, next) => {
    ctx.body = 'OK from static route';
    next();
});

// XMLHttpRequest routes
const xmlRouter = new Router()
xmlRouter.get('/user', (ctx, next) => {
    if (isXmlRequest(ctx)) {
        // serve it
        ctx.body = { ok: 'from JSON/XML' }
    } else {
        // downstream to next handler
        next();
    }
});

app.use(xmlRouter.routes());
app.use(staticRouter.routes());

const server = app.listen(3000)

This is not using middleware bwcause here you can only allow downstream with next but if there is no next, then this stops. There is no else ;-) Just for reference

Sebastian Hildebrandt
  • 2,661
  • 1
  • 14
  • 20