现在zeit部署时,nuxt上的Axios API代理无法在服务器端渲染上运行

时间:2019-08-30 18:00:29

标签: javascript axios nuxt.js zeit-now

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)

唯一的问题是从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请求在所有环境下都能正常工作?

2 个答案:

答案 0 :(得分:2)

这可以使用 Like.findOrCreate({ where: {//object containing fields to found InstagramPostId: inputLike.InstagramPostId, InstagramUserId: inputLike.InstagramUserId }, defaults: {//object containing fields and values to apply postInstagramPostId: inputLike.postInstagramPostId, userInstagramUserId: inputLike.userInstagramUserId } }).then(function(){//run your calllback here console.log("callback!!"); }).catch(err => { res.status(500).send("Error -> " + err); }); Vercel 文件中的 rewrite 来实现。无需破解。

now.json

答案 1 :(得分: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中获得主机以匹配“普通”主机。如果您知道配置文件的格式(应该使用的格式),则可以导入并解析该文件,以便获得一个真实的来源。

让我知道这是否可行。