Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 333
Piosek Avatar asked Mar 31 '19 11:03

Piosek


2 Answers

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

like image 165
FooBar Avatar answered Oct 04 '22 01:10

FooBar


Continuing the foobar's thought: for windows OS you need to write not "export", but "set" in package.json:

set NODE_TLS_REJECT_UNAUTHORIZED=0 && nuxt --env.NODE_TLS_REJECT_UNAUTHORIZED=0
like image 41
gorevanova Avatar answered Oct 04 '22 01:10

gorevanova