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与“普通”主机匹配。如果您知道您的配置文件的格式（您应该知道），则可以导入和解析它以获得一个真实来源。

让我知道这是否有效。