26

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?

CC BY-SA 3.0
Improve this question
3

3 Answers 3

Reset to default
8

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.

CC BY-SA 4.0
Improve this answer
3
  • 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
    Commented Jun 12, 2023 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
    Commented Jun 15, 2023 at 20:09
  • 2
    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
    Commented Jul 12, 2023 at 4:01
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

CC BY-SA 4.0
Improve this answer
0

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
CC BY-SA 4.0
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.