vue.js - Nuxt serverMiddleware 从 API 获取 json

Question

我不想从 301.json 获取重定向，而是想向我的 api 发出一个返回我的 json 的请求。

我正在使用 @nuxtjs/axios 模块。

const redirects = require('../301.json');

export default function (req, res, next) {

    const redirect = redirects.find(r => r.from === req.url);

    if (redirect) {
        console.log('redirect: ${redirect.from} => ${redirect.to}');
        res.writeHead(301, { Location: redirect.to });
        res.end();
    } else {
        next();
    }
}

Answer 1

原始答案

要建立在@Dominooch 的答案之上，如果您只想返回 JSON，则可以使用 .json() 帮助器。它会自动将内容类型设置为 application/json 并将您传递给它的对象字符串化。

编辑:

为了阐明我们在这里做什么，我们将完全替换您的 301.json 并使用 nuxt 的创建中间件的方式来:

1. 定义一个通用处理程序，您可以为任何路由重用
2. 明确定义哪些路径将使用您的处理程序(我假设您正在执行 301.json 操作)

如果 301.json 实际上只是您想要重定向的路径数组，那么您可以只使用 .map() 但我个人不会，因为它不是立即清楚哪些路径正在重定向(请参阅我的最后一个示例) 也就是说，我要避免的最后一件事是制作一个全局中间件(针对每个请求触发)来检查路径是否包含在您的数组中。 <- 将使数组中每个项目的路由处理时间更长。使用 .map() 将使 nuxt 为您进行路由匹配(无论如何它已经这样做了)，而不是通过您的处理程序发送每个请求。

// some-api-endpoint.js
import axios from 'axios'

export default {
    path: '/endpoint'
    handler: async (req, res) => {
        const { data } = await axios.get('some-request')
        res.json(data)
    }
}

然后在你的 nuxt.config.js 中:

// nuxt.config.js

module.exports = {
    // some other exported properties ...
    serverMiddleware: [
        { path: '/endpoint', handler: '~/path/to/some-api-endpoint.js' },
    ]
}

如果 301.json 真的只是一个路径数组:

// nuxt.config.js

const routes = require('../301.json');

module.exports = {
    // some other exported properties ...
    serverMiddleware: routes.map(path =>
        ({ path, handler: '~/path/to/some-api-endpoint.js' }))
}

或者如果你有其他中间件:

// nuxt.config.js

const routes = require('../301.json');

module.exports = {
  // some other exported properties ...
  serverMiddleware: [
    ...routes.map(path =>
      ({ path, handler: '~/path/to/some-api-endpoint.js' })),
    ... // Other middlewares
}