Nuxt.js problem with server-side API call with https

Question

I have problem with nuxt server-side API call when im using HTTPS. On client side everyting is fine and API works when im switching pages on client side via links, but when I hit Ctrl + f5 and data will be pre-fetched on server side, there is no actually API call and data is not provided. Even no error is thrown, but eveything works just fine with plain HTTP.

On my production server nodejs version - v10.9.0 And for HTTPS im using SNI SSL provided via my nodejs web hosting provider

This problem is similar to: https://github.com/nuxt/nuxt.js/issues/2934 Except that the solution provided there does not work for me.

Edited:

This is the error im getting in store.js after axios get in nuxtServerInit: 'unable to verify the first certificate'

Edited 2:

After that Ive found: https://forum.vuejs.org/t/nuxtserverinit-with-axios-unable-to-verify-the-first-certificate/31010

And I applied plugin which extends axios:

plugins/axios.js:

import https from 'https';

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

nuxt.config.js:

plugins: [
    '@/plugins/axios',
]

It works now on server-side as good as on client-side. But I have another questions. Is this solution safe?

Do you use nuxt/axios ? Did you tried to log output of API calls and see what's there? — Aldarund
Thanks for advice, stupid me. Yes, im using nuxt with Axios. Finally I manage how to get error. Thats what I get in catch block when in store.js I call API on server side: 'unable to verify the first certificate' — Piosek

FooBar FooBar · Accepted Answer · 2020-02-19T12:14:29

I found this solution to be easier to manage:

export NODE_TLS_REJECT_UNAUTHORIZED=0 && yarn dev --env.NODE_TLS_REJECT_UNAUTHORIZED=0

Also it ensures that it is only run during development, where the issue with self signed certificates would most likely occur.

You could also add it to your package.json like so:

"scripts": {
  "dev": "export NODE_TLS_REJECT_UNAUTHORIZED=0 && nuxt --env.NODE_TLS_REJECT_UNAUTHORIZED=0",

As a plugin

You could also create an plugins/axios.js file

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;
    }
  });
}

Be sure to add the plugin to your nuxt.config.js file

Nuxt.js problem with server-side API call with https

2 Answers

As a plugin