3

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

我按照本指南https://nuxtjs.org/faq/http-proxy/解决了 Firefox/IE 上的 CORS 问题，但最终出现 NuxtServerError: socket hang up on each proxied request if I ENABLE server https option in nuxt.config .js，如果我禁用，则不会。

我尝试将 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 参数，它会很好地工作。这是我的 axios 调用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]
  }
}

我将不胜感激任何帮助 ：）

4

2 回答 2

0

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'];
于 2021-08-13T09:54:30.660 回答
0

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

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

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

于 2019-07-25T14:38:05.107 回答