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

Question

按照Axios NuxtJS 配置，我在我的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)

当从zeit now部署调用此代码时，会出现唯一的问题。 客户端工作正常，但服务器端返回此错误：

START RequestId: dd92dbad-135f-414b-bc1d-df9faffaa681 Version: $LATEST
2019-08-30T17:46:03.098Z    dd92dbad-135f-414b-bc1d-df9faffaa681    INFO    λ Cold start took: 5265.617811ms
END RequestId: dd92dbad-135f-414b-bc1d-df9faffaa681
REPORT RequestId: dd92dbad-135f-414b-bc1d-df9faffaa681  Duration: 438.53 ms Billed Duration: 500 ms     Memory Size: 3008 MB    Max Memory Used: 92 MB  

N',
     xsrfHeaderName: 'X-XSRF-TOKEN',
     maxContentLength: -1,
     validateStatus: [Function: validateStatus],
     data: undefined },
  request:
   Writable {
     _writableState:
      WritableState {
        objectMode: false,
        highWaterMark: 16384,
        finalCalled: false,
        needDrain: false,
        ending: false,
        ended: false,
        finished: false,
        destroyed: false,
        decodeStrings: true,
        defaultEncoding: 'utf8',
        length: 0,
        writing: false,
        corked: 0,
        sync: true,
        bufferProcessing: false,
        onwrite: [Function: bound onwrite],
        writecb: null,
        writelen: 0,
        bufferedRequest: null,
        lastBufferedRequest: null,
        pendingcb: 0,
        prefinished: false,
        errorEmitted: false,
        emitClose: true,
        autoDestroy: false,
        bufferedRequestCount: 0,
        corkedRequestsFree: [Object] },
     writable: true,
     domain: null,
     _events:
      [Object: null prototype] { response: [Function], error: [Function] },
     _eventsCount: 2,
     _maxListeners: undefined,
     _options:
      { protocol: 'http:',
        maxRedirects: 21,
        maxBodyLength: 10485760,
        path: '/api/pageForSlug?routeName=lud_form',
        method: 'GET',
        headers: [Object],
        agent: undefined,
        auth: undefined,
        hostname: 'localhost',
        port: '3000',
        nativeProtocols: [Object],
        pathname: '/api/pageForSlug',
        search: '?routeName=lud_form' },
     _redirectCount: 0,
     _redirects: [],
     _requestBodyLength: 0,
     _requestBodyBuffers: [],
     _onNativeResponse: [Function],
     _currentRequest:
      ClientRequest {
        domain: null,
        _events: [Object],
        _eventsCount: 6,
        _maxListeners: undefined,
        output: [],
        outputEncodings: [],
        outputCallbacks: [],
        outputSize: 0,
        writable: true,
        _last: true,
        chunkedEncoding: false,
        shouldKeepAlive: false,
        useChunkedEncodingByDefault: false,
        sendDate: false,
        _removedConnection: false,
        _removedContLen: false,
        _removedTE: false,
        _contentLength: 0,
        _hasBody: true,
        _trailer: '',
        finished: true,
        _headerSent: true,
        socket: [Socket],
        connection: [Socket],
        _header:
         'GET /api/pageForSlug?routeName=lud_form HTTP/1.1\r\nAccept: application/json, text/plain, */*\r\nx-now-deployment-url: lps-5fxmi58fz.now.sh\r\nx-now-trace: staging-gru1\r\nx-real-ip: 177.45.65.235\r\nx-zeit-co-forwarded-for: 177.45.65.235\r\nupgrade-insecure-requests: 1\r\nx-forwarded-proto: https\r\nx-now-id: 7xllz-1567187175018-d0ce35475a9e\r\naccept-encoding: gzip, deflate\r\nuser-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36\r\nx-forwarded-for: 177.45.65.235\r\nx-forwarded-host: lps-danicuki.playax.now.sh\r\ndnt: 1\r\naccept-language: en-US,en;q=0.9\r\nconnection: close\r\nHost: localhost:3000\r\n\r\n',
        _onPendingData: [Function: noopPendingOutput],
        agent: [Agent],
        socketPath: undefined,
        timeout: undefined,
        method: 'GET',
        path: '/api/pageForSlug?routeName=lud_form',
        _ended: false,
        res: null,
        aborted: undefined,
        timeoutCb: null,
        upgradeOrConnect: false,
        parser: null,
        maxHeadersCount: null,
        _redirectable: [Circular],
        [Symbol(isCorked)]: false,
        [Symbol(outHeadersKey)]: [Object] },
     _currentUrl: 'http://localhost:3000/api/pageForSlug?routeName=lud_form' },
  response: undefined,
  isAxiosError: true,
  toJSON: [Function] }
END RequestId: 6e355938-32d5-459a-adf7-08fb97101e29
REPORT RequestId: 6e355938-32d5-459a-adf7-08fb97101e29  Duration: 281.53 ms Billed Duration: 300 ms     Memory Size: 3008 MB    Max Memory Used: 117 MB 
RequestId: 6e355938-32d5-459a-adf7-08fb97101e29 Error: Runtime exited with error: exit status 1
Runtime.ExitError 

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

Answer 1

这可以通过rewrite now.json Vercel 文件来实现。 不需要黑客。

{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
      "config": {}
    }
  ],
  "rewrites": [
    {
      "source": "/api/:match*",
      "destination": "https://myapidomain.com/:match*"
    }
  ]
}

Answer 2

你准备好迎接终极黑客了吗？

这其实是一个普遍的问题。 zeit now调用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" }
]

当您使用zeit now构建时，这将支持并执行proxy.js 。

请注意，这确实意味着您需要在proxy.js获取主机以匹配“普通”主机。 如果您知道您的配置文件的格式（您应该知道），则可以导入和解析它以获得一个真实来源。

让我知道这是否有效。