SSL certificate - disable verification in axios and react

Question

I'm trying to consume an API in my react application using axios. The API works over HTTPS with self signed certificate. So far I've got the following error when connecting:

net::ERR_INSECURE_RESPONSE
bundle.js:65253 HTTP Failure in Axios Error: Network Error
    at createError (bundle.js:2188)
    at XMLHttpRequest.handleError (bundle.js:1717)

I tried the following but without success:

import axios from 'axios';

const https = require('https');

const agent = new https.Agent({
    rejectUnauthorized: false,
});

const client = axios.create({ //all axios can be used, shown in axios documentation
    baseURL: process.env.REACT_APP_API_URL,
    responseType: 'json',
    withCredentials: true,
    httpsAgent: agent
});

export default client;

Is there any way to disable the certificate verification?

Solution 1

Here is a way to have self-signed and accepted localhost certificates. Basically, you generate the certificate and add it to Chrome manually before using it.

Guide by Let's Encrypt: https://letsencrypt.org/docs/certificates-for-localhost/ (seems a bit advanced).

There is this answer too, that explains how to add certificate while you are at the site: https://stackoverflow.com/a/18602774

Solution 2

None of these seem to actually answer the question. The question isn't how to self-sign a cert or how to disable security in the browser. The question is: specifically with axios how do you disable SSL verification?

This should be the same as adding -k or --insecure flag to a cURL command. If you can do it with cURL then it should be possible with axios.

Note that this doesn't disable encryption since the server is still in control of that if you otherwise have https set up correctly. It just disables checking whether you are talking to the right server.

Anyway, in my case I resolved this issue for myself by changing:

const agent = new https.Agent({
    rejectUnauthorized: false,
});

to

const agent = new https.Agent({
   rejectUnauthorized: false,
   requestCert: false,
   agent: false,
});

Following the answer in the similar question linked by Philippe Sultan. I don't actually get what each option does individually. If someone can answer in the comments that would be great.

Comments

[Philippe Sultan]

This question + answer is somehow similar : stackoverflow.com/questions/46968937/…. NPM packages used there are bit different though. Hope this helps!

[slebetman]

This is not possible due to browser developers (Google, Apple, Microsoft, Mozilla, Brave and Opera) having decided a long time ago to make it impossible to do. The only thing you can do is go get a free SSL certificate (you would need to own a domain or subdomain name to do so though)

[Wiktor Zychla]

For a seamless experience, you could possibly build your own proxy that exposes the very same set of services but has a valid certificate. The proxy run at the server side will have no issues talking to another service that is behind an invalid certificate.