nuxt 上的 Axios api 代理不适用于现在 zeit 部署的服务器端渲染

Question

按照Axios NuxtJS 配置，我在我的 config 上创建了这样的代理配置nuxt.config.js：

  proxy: {

    '/api/': {

      target: 'https://myapidomain.com/',

      pathRewrite: { '^/api/': '' },

      changeOrigin: true

    }

  }

此配置在dev环境中完美运行，包括服务器端渲染和客户端渲染。这是我们用来创建 api 包装器的代码api.js：

export default (context, inject) => {

  inject('api', {

    getPageForSlug: (slugRoute) => {

      return context.$axios.$get(`/api/pageForSlug?routeName=${slugRoute}`)

    },

  })

}

然后从任何 vue 类：

const response = await app.$api.getPageForSlug(params.slug_route)

如何使服务器端 API 请求适用于所有环境？

Answer 1

你准备好迎接终极黑客了吗？这其实是一个普遍的问题。调用 时zeit now，服务器实际上并没有得到支撑。因此，您需要自己完成。我唯一一次遇到需要这样做的时候，我用 express 来解决它。一个快速而肮脏的解决方案是创建另一个脚本 ( proxy.js)，并具有如下内容：import express from 'express'import proxy from 'express-http-proxy'const app = express()app.use('/', proxy(`https://myapidomain.com`))export default app这只是为您的 API 设置反向代理。从那里，在您的 zeit 配置中，找到您的builds密钥（如果有），并将其替换为："builds": [    { "use": "@now/next", "src": "package.json" },    { "use": "@now/node", "src": "proxy.js" }]这将支撑并执行proxy.js当你建立使用zeit now。请注意，这确实意味着您需要让主机proxy.js与“普通”主机匹配。如果您知道您的配置文件的格式（您应该知道），则可以导入和解析它以获得一个真实来源。让我知道这是否有效。