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

Question

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

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

我尝试将拒绝未经授权：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的公理呼吁：

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 模块的模块克隆。不幸的是，此设置不能与 axios-module 一起使用，因为无论我是否有代理设置，它都会创建套接字挂断。

Answer 2

https://stackoverflow.com/a/43439886/1989083

我通过将这些行添加到 axios 中来解决同样的问题.js：

delete process.env['http_proxy'];
delete process.env['HTTP_PROXY'];
delete process.env['https_proxy'];
delete process.env['HTTPS_PROXY'];