首页 > 解决方案 > 在 wagtail 中,我如何设置 v2 api 以将完整的基本 URL(例如 http://localhost:8000" )附加到蒸汽场图像和富文本嵌入?

问题描述

我目前正在使用 nuxt.js 作为我的 wagtail 无头 cms 的前端。当我在流字段中加载富文本字段或图像块时,我无法或不知道如何附加 wagtail 服务器的完整基本 URL,因此当它在 nuxtjs 站点上呈现时,它最终会解析为src="/media/images/image.png哪个试图在 nuxtjs 站点上找到图像http://localhost:3000,它需要在 wagtail 服务器端找到它http://localhost:8000。对于标准图像,我可以截取并预先添加服务器基本 url,但对于流域内的任何内容,则不能。

标签: djangonuxt.jswagtail

解决方案


[编辑:下面有更好的答案]我不是 100% 确定这是“正确”的方法,但我设法通过添加一个服务器中间件来获得我需要的东西,该中间件检测以目录开头的任何内容/media并预先添加服务器基本网址。

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

然后在`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()
    }
}

这是一个快速的解决方法,现在我会看看是否有更好的方法。

好的,我相信这是正确的解决方案。它似乎在逃避我:P

而不是使用重定向只需添加一个代理到nuxt.config.js

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

推荐阅读