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?

This question + answer is somehow similar : https://stackoverflow.com/questions/46968937/nodejs-request-post-not-working-for-https-website. NPM packages used there are bit different though. Hope this helps! — Philippe Sultan, Dec 04 '17 at 13:56
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) — slebetman, Jun 11 '19 at 05:31
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. — Wiktor Zychla, Jun 11 '19 at 06:19

Frikster · Answer 1 · 2022-01-16T22:01:05.293

5

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.

edited Jan 16 '22 at 22:01

answered Jan 14 '22 at 22:43

Frikster

2,755
5
37
71

1

This works great in a node project. However, the question was how to get this to work in a react project. The node https agent will not be available. – LittleChewbacca Jun 12 '23 at 16:34
@LittleChewbacca This worked for me in a React project. My project doesn't have any node. In React you can do "const https = require('https');" which you can also see in the code in the question being asked. – Frikster Jun 15 '23 at 20:09
When I try this; `BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }' - install 'https-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false }` error happens – Emin Berkay Dağlar Jul 12 '23 at 04:01

score 1 · Answer 2 · answered Oct 22 '19 at 12:20

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

score 0 · Answer 3 · answered Jan 02 '20 at 09:09

First of all the reason error is not on your code. It's because security restriction on your browser. By default browser will block request to self signed since its not a certificate from valid certificate authority (CA).

Either upgrade SSL certificate from a CA or you need to disable web security in browser.

e.g. for chrome start with cmd line args as below

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp

SSL certificate - disable verification in axios and react

3 Answers3

Linked