In wagtail how do I setup the v2 api to attach the full base url ( e.g. http://localhost:8000" ) to steamfield images and richtext embeds?

Question

I am currently using nuxt.js as a frontend for my wagtail headless cms. When I load a richtext field or an image block within a streamfield I am unable, or don't know how to, attach the full base url of the wagtail server so when it gets rendered on the nuxtjs site it resolves to src="/media/images/image.png which in the end tries to find the image on the nuxtjs site http://localhost:3000 and it needs to find it on the wagtail server side http://localhost:8000. For standard images I can intercept and prepend the server base url, but not when it comes to anything inside a streamfield.

Answer 1

[EDIT: Better answer below] I'm not 100% certain this is the "proper" way to do it, but I managed to get what I needed by adding a server middleware that detects anything that starts with the directory /media and prepends the server base url.

// in nuxt.config.js
export default {
    serverMiddleware:[
      '~/serverMiddleware/redirects'
    ],
}

then in `serverMiddleware/redirects.js

export default function(req, res, next) {
    if (req.url.startsWith('/media')) {
        res.writeHead(301, {Location: `http://localhost:8000${req.url}`})
        res.end()
    } else {
        next()
    }
}

This is a quick workaround for now I'll see if there is anything better.

Ok, I believe this is the proper solution. It just seemed to evade me :P

Instead of using a redirect simply add a proxy to nuxt.config.js

modules: [
    '@nuxtjs/axios',
],
axios: {proxy: true},
proxy: {
    '/api/v2/': 'http://localhost:8000',
    '/media/': 'http://localhost:8000'
}