'Self Signed Cert error in Nuxt trying to generate static site locally

I'm building a Vue/Nuxt (2) site running against a .NET Web Api. This site is already deployed in a staging capacity and is building and running as a statically generated site on Netlify. Now, I know it's not quite right as my content is not being rendered into the deployed files so effectively it's running as a SPA. Not quite what I saw happening in Dev at the time 5 weeks ago but I didn't think anything of it, I'd fix it later.

I've finally got a chance to work on this project again and proceeded to make the necessary changes so the content should be fetched via my dynamic route builder in nuxt.config.js (existing) and output during build via the asyncData hook in my pages (new).

Nuxt.config

// Generate dynamic page routes
let dynamicRoutes = async () => {

    console.log( `${ process.env.API_BASE_URL }/page/main/generate` );
    const fetchedConditions = await axios.get( `${ process.env.API_BASE_URL }/page/main/generate` );
    const routesForConditions = fetchedConditions.data.map( ( condition ) => {
        return {
            route: `/conditions/${ condition.id }/${ condition.urlPath }`,
            payload: condition
        }
    } );

    console.log( `${ process.env.API_BASE_URL }/faq/top/generate?count=10` );
    const fetchedFaqs = await axios.get( `${ process.env.API_BASE_URL }/faq/top/generate?count=10` );
    const routesForFaqs = fetchedFaqs.data.map( ( faq ) => {
        return {
            route: `/frequently-asked-questions/${ faq.categoryId }/${ faq.id }/${ faq.urlPath }`,
            payload: faq
        }
    } );

    const routes = [ ...routesForConditions, ...routesForFaqs ];

    return routes;

}

export default {
    target: 'static',
    ssr: false,
    generate: {
        crawler: true,
        routes: dynamicRoutes
    },
    server: {
        port: 3001
    }...

Condition page

async asyncData(ctx) {
    util.debug('Async data call...');
    if (ctx.payload) {
        ctx.store.dispatch("pages/storePage", ctx.payload);
        return { condition: ctx.payload };
    } else {
        const pageResponse = await ctx.store.dispatch('pages/getCurrentPage', { pageId: ctx.route.params.id });
        return { condition: pageResponse };
    }
}

So far so good except now, when I try to generate the site in development i.e. "npm run generate", the dynamic route generator code cannot reach my local API running as HTTPS and fails with a "Nuxt Fatal Error: self signed certificate".

https://localhost:5001/api/page/main/generate                                                                                                                                                                   12:06:43

ERROR  self signed certificate                                                                                                                                                                                 12:06:43  

  at TLSSocket.onConnectSecure (node:_tls_wrap:1530:34)
  at TLSSocket.emit (node:events:390:28)
  at TLSSocket._finishInit (node:_tls_wrap:944:8)
  at TLSWrap.ssl.onhandshakedone (node:_tls_wrap:725:12)

This worked 5 weeks ago and as far as I am aware I have not changed anything that should impact this. No software or packages have been updated (except windows updates perhaps). The API is still using .NET 5.0 and running on Kestrel using the default self signed cert on localhost (which is listed as valid in Windows). I simply added the payload to the routes, added the asyncData hook, and modified the page code accordingly.

I've Googled a few tidbits up but none have resolved the issue and now I'm at a loss. It really shouldn't be this blimmin opaque in 2022.

Tried disabling SSL via a proxy in nuxt.config;

proxy: {
    '/api/': {
        target: process.env.API_BASE_URL,
        secure: !process.env.ENV === 'development'
    }
}

Tried modifying my Axios plugin to ignore auth;

import https from 'https';

export default function ( { $axios } ) {
    $axios.defaults.httpsAgent = new https.Agent( { rejectUnauthorized: false } );
}

And a variation of;

import https from 'https';

export default function ( { $axios, store } ) {
    const agent = new https.Agent( {
        rejectUnauthorized: false
    } );
    $axios.onRequest( config => {
        if ( process.env.dev )
        {
            config.httpsAgent = agent;
        }
    } );
}

None of these 'worked for other people' solutions is working for me.

Also, the client side apps (public/admin) themselves have no problem working against my API locally, it's only the route builder within nuxt.config or asyncData code which is throwing this error.

Any suggestions would be appreciated. Happy to add other relevant code if needed, just not sure which atm.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source