Nuxt.js/Axios self signed certificate error

Question

I have a problem with making a local GET request from http to https.

Situation: I use a tool called Local(https://localwp.com/) to quickly generate a local WordPress development environment. It's local address is https://backend.local (via host file). I also have a Nuxt.js app running on http://localhost:3000.

With axios, I try to make a GET request to the WordPress REST api, but I get the following error:

NuxtServerError

self signed certificate 

If I try the fetch method, I get the following response:

FetchError
request to https://backend.local/wp-json/wp/v2/posts failed, reason: self signed certificate

It only works, when I make a GET request to a non-local URL.

But after a few hours of googling and trying all the solutions, nothing worked and I am getting a bit frustrated now :)

My setup is: MacBook Pro 2019 Catalina 10.15.4, Chrome 83.0.4103.61

I hope someone has an answer for me :)

Thank you!

Answer 1

I followed those steps and got to fix the issue:

1. Create a plugins folder, if it doesn't exist. Inside plugins folder, create axios.js file with the following:

import https from 'https';

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

2. At nuxt.config.js file, find the plugins section, and add the following:

// Other configurations here
plugins: [
    // Other plugins here
    '@/plugins/axios',
],
// Rest of the file