0

I am working to develop a Nativescript app that hits a backend API (running Laravel). For development, the app is being served locally using Laravel Valet on jwt9.test.

I am having issues with Axios accepting my self-signed certificate. The below code works brilliantly when hitting an outside API:

const axios = require('axios').default;
const instance = axios.create({
     baseURL: 'https://jsonplaceholder.typicode.com/posts/',
});

instance.get('/1',
   {
     'email': email,  // relic for local instance
     'password': password // relic for local instance
   }, {
   "headers": {
     'Content-Type': 'application/json',
   }
})
   .then(function (response) {
       console.log("Dilly Dilly: " + JSON.stringify(response));
   })
   .catch(function (error) {
       console.log("Zut: " + error)  
   });
}

When I flip it to the local server (change to a post with appropriate URL that is working just fine via Postman), I receive:

JS: 'Zut: Error: Request failed with status code null'

My research indicates that Axios doesn't like self-signed certificates.

I have seen some solutions that involve loading the LaravelValetCASelfSigned.pem into the emulator and/or having Axios load it, but details are sparse and documentation not full (I'm relatively new to all of this so if you are a grizzled vet and think it's simple, please elucidate!).

Per https://github.com/axios/axios/issues/535, if I try the suggested approach and install the node "https" module and load up:

var https = require('https');

while also in-lining in my request:

{
     "httpsAgent": new https.Agent({ rejectUnauthorized: false })
},

I am told that TypeError: https.Agent is not a constructor. Dropping "new" results in https.Agent is not a function.

For a non-developer, I feel I've made enormous headway, but the simple problem of how to create a functional local development environment using relatively common tools such as Nativescript, Laravel, Valet, and Axios is escaping me.

Any suggestions? I'm not keen to have a live development environment.

scott_p
  • 57
  • 11
  • 1
    Are you able to reach your local API without SSL? Just to make sure that your general setup is working. – philippzentner Jan 15 '20 at 17:36
  • No, I cannot reach it programmatically, just with Postman. That is why I tested using the external api so I could just switch out the url and request type. – scott_p Jan 15 '20 at 20:20
  • If you have configured the domain name locally in your computer, it's not going to work. POSTMAN runs within your computer so it may able to hit the server but the emulator / mobile device is connected individually as a separate entity to the network, it won't know where to look for with given domain. This is not an issue with {N} but your network, you have to setup DNS or some sort of proxy on your network. Also you can not use https module for NodeJS, use nativescript-https for SSL handshake. – Manoj Jan 15 '20 at 22:59
  • ok. Thanks @Manoj. That's a bummer though. I would have thought that a local development environment would have been less painful to setup for modern technologies. – scott_p Jan 16 '20 at 01:21
  • @scott_p an easy solution for this would be using [Ngrok](https://ngrok.com/) – philippzentner Jan 16 '20 at 05:55

1 Answers1

0

@pz90 suggested Ngrok and this was the answer of course. I'd over-complicated things in my head, getting tangled up in SSL certificates, Axios requirements, Postman requirements, etc...

In short, be sure you unsecure (if secured) your valet site using: valet unsecure [sitename]

with [sitename] being obtained via: valet links

From there you can... valet share

...and hit your local site (and DB assuming your hooks are correctly setup) using a variation of the code at the Axios github. The below works, fwiw. 

        const axios = require('axios').default;

        axios.defaults.baseURL = 'https://xxxx.ngrok.io';
        axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

        // Send a POST request
        axios({
            method: 'post',
            url: '/api/login',
            data: {
                email: email,
                password: password,
            }
        }).then(function (response) {
            console.log(response.data);  //Outputs API response in CL to verify functionality.
        });

I'm grateful for this site and it's participants. Thank you.

scott_p
  • 57
  • 11