Question

我正在使用Axios模块（https://axios.nuxtjs.org） Nuxt 2.8.1 。

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

我尝试向服务器https参数添加rejectUnauthorized：false，编写了一个Express服务器来处理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的模块克隆。不幸的是，此设置无法与axios-module一起使用，因为无论我是否有代理设置，该设置也会造成套接字挂断。

Nuxt.js套接字在axios上挂断，只能在https上获得，而不能在http服务器上获得

1 个答案: