使用asyncData时@ nuxtjs / axios抛出EPROTO SSL错误

Question

我想知道你是否有同样的问题。我正在尝试通过SSL和https实现接近真实世界的本地开发，因此我按照此webpage上的说明安装了根证书，以将其用于将来的开发。

然后，我安装了nuxt.js应用程序来表示并使用https.createServer绕过我的证书。

因此，在我的路线https://locahost:4000/api/test中，我可以获取一些转储JSON示例数据，并尝试在nuxt.js呈现页面之前使用asyncData获取此数据。

但是我总会出现错误，看起来像这样：

有趣的部分是：当我在客户端获取数据（使用vue中的方法）时，我没有任何错误...

以下是我的代码库的一些示例：

nuxt.config.js

export default {
    mode: "universal",
    srcDir: "src/",
    loading: '~/components/loading.vue',
    head: {
        title: 'Webapp',
        meta: [
            {
                charset: 'utf-8'
            },
            {
                name: 'viewport',
                content: 'width=device-width, initial-scale=1'
            }
        ]
    },
    build: {
        publicPath: '/dist/',
        babel: {
            presets: [
                '@babel/preset-env'
            ],
            plugins: [
                '@babel/plugin-syntax-dynamic-import',
                '@babel/plugin-transform-runtime'
            ]
        },
        vendor: [
            '@nuxtjs/axios'
        ],
        filenames: {
            css: 'common.[contenthash].css',
            manifest: 'manifest.[hash].js',
            vendor: 'common.[chunkhash].js',
            app: 'app.[chunkhash].js',
            chunk: '[name].[chunkhash].js'
        }
    },
    modules: [
        [
            'nuxt-sass-resources-loader', {
                resources: './src/assets/sass/app.sass'
            }
        ],
        '@nuxtjs/axios',
    ],
    axios: {
        proxyHeaders: false,
        proxy: false,
        https: true,
        host: 'localhost',
        port: 4000
    },
    plugins: [
        {
            src: '~/plugins/components',
            ssr: true
        },
        '~/plugins/axios'
    ],
    serverMiddleware: [
        '~/server/index.js'
    ],
    server: {
        port: 4000,
        host: "localhost"
    }
}

server / index.js

import { Nuxt, Builder } from 'nuxt-edge'
import express from 'express'
import http from 'http'
import https from 'https'
import fs from 'fs'
import path from 'path'
import slug from 'slug'
import moment from 'moment'
moment.locale('de')
import initMongoDB from './mongodb'
import api from './api'

const nuxtconfig = require("./../../nuxt.config");
const config = { dev: process.env.NODE_ENV !== 'production', ...nuxtconfig.default };
const nuxt = new Nuxt(config)
const app = express();

if (config.dev) {
    app.server = https.createServer({
        hostname: 'localhost',
        port: 4000,
        key: fs.readFileSync(path.resolve('certs/localhost.key')),
        cert: fs.readFileSync(path.resolve('certs/localhost.crt'))
    }, app)
} else {
    app.server = http.createServer(app)
}

initMongoDB(mongoDB => {
    app.use(api({ mongoDB, moment, slug }), (req, res) => setTimeout(() => nuxt.render(req, res), 0));
    if (config.dev) {
        new Builder(nuxt).build()
            .then(listen)
            .catch((error) => {
                console.error(error)
                process.exit(1)
            })
    } else {
        listen()
    }
})

function listen() {
    app.server.listen(process.env.PORT || config.server.port)
}

api / index.js

import { Router } from 'express';

export default ({ mongoDB, moment, slug }) => {

    let api = Router()
    const users = [
        {
            name: 'Alexandre'
        },
        {
            name: 'Pooya'
        },
        {
            name: 'Sébastien'
        }
    ]

    api.use('/api/test', (req, res) => res.json(users))

    return api
}

pages / index.vue

<template lang="pug">
    div Hello
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        async asyncData({ app, req, res }) {
            const users = await app.$axios.$get('https://localhost:4000/api/test', {   
                proxyHeaders: false,
                proxy: false,
                https: true,
                host: 'localhost',
                port: 4000
            })
            return { users }
        },
        methods: {
        }
    }
</script>