axios - Nuxt.js 套接字在 axios 上挂起只在 https 而不是 http 服务器上

Question

我正在使用 Nuxt 2.8.1，Axios 模块 ( https://axios.nuxtjs.org )。

我遵循了本指南 https://nuxtjs.org/faq/http-proxy/解决 Firefox/IE 上的 CORS 问题，但最终 NuxtServerError:如果我在 nuxt.config.js 中启用服务器 https 选项，套接字会在每个代理请求上挂起，如果我禁用则不会。

我尝试将 rejectUnauthorized: false 添加到服务器 https 参数，编写了一个快速服务器来处理 SSL 证书并使用 Nuxt 呈现，...但仍然无法解决问题。

这是我的 nuxt.config.js:

  env: {
    API_HOST: 'https://api.mywebsite.com',
    BASE_URL: process.env.BASE_URL || 'http://localhost:3000',
  },
  axios: {
    proxy: true,
  },
  proxy: {
    '/api/': {
      target: 'https://api.mywebsite.com/api',
      pathRewrite: {'/api': ''},
      credentials: false,
    }
  },
  server: {
    port: 3000,
    https: {
      rejectUnauthorized: false,
      key: fs.readFileSync('../privkey.pem'),
      cert: fs.readFileSync('../fullchain.pem')
    }
  }

如果我只是删除“服务器”中的整个 https 参数，效果会很好。这是我对 store/index.js 的 axios 调用:

export const actions = {
    async nuxtServerInit ( { commit } ) {
        const { data } = await this.$axios.get('/api/option');

        let options = {};

        data.forEach(item => {
            options[item.Name] = item.Value;
        });

        commit('setOptions', options)
    },
}

这是我在 axios 调用上的控制台日志:

Promise {                                                                                                                                                                                                       18:04:38
  <rejected> [Error: socket hang up] {
      at createHangUpError (_http_client.js:323:15)
      at Socket.socketOnEnd (_http_client.js:426:23)
      at Socket.emit (events.js:203:15)
      at Socket.EventEmitter.emit (domain.js:448:20)
      at endReadableNT (_stream_readable.js:1129:12)
      at process._tickCallback (internal/process/next_tick.js:63:19)
    code: 'ECONNRESET',
    config: {
      url: 'http://localhost:3000/api/option',
      method: 'get',
      headers: [Object],
      baseURL: 'http://localhost:3000/',
      transformRequest: [Array],
      transformResponse: [Array],
      timeout: 0,
      adapter: [Function: httpAdapter],
      xsrfCookieName: 'XSRF-TOKEN',
      xsrfHeaderName: 'X-XSRF-TOKEN',
      maxContentLength: -1,
      validateStatus: [Function: validateStatus],
      data: undefined
    },
    request: Writable {
      _writableState: [WritableState],
      writable: true,
      domain: null,
      _events: [Object],
      _eventsCount: 2,
      _maxListeners: undefined,
      _options: [Object],
      _redirectCount: 0,
      _redirects: [],
      _requestBodyLength: 0,
      _requestBodyBuffers: [],
      _onNativeResponse: [Function],
      _currentRequest: [ClientRequest],
      _currentUrl: 'http://localhost:3000/api/option'
    },
    response: undefined,
    isAxiosError: true,
    toJSON: [Function]
  }
}

如果有任何帮助，我将不胜感激:)

Answer 1

我尝试使用我认为与代理模块相关的尽可能多的选项，但最终无济于事。我认为你应该在 @nuxtjs/proxy 上创建一个问题或 http-proxy-middleware github.

在我看来，代理路由在 Vue 的正常生命周期中没有问题，但当放置在 asyncData 或 fetch 中时，套接字最终会挂起 - 所以我认为这是一个 SSR 问题。

我对 CORS 没有任何问题，所以我最终创建了 axios-module 的模块克隆与定制原型(prototype)。不幸的是，这个设置不能与 axios-module 一起工作，因为无论我是否有代理设置，它也会创建套接字挂断。