I set a API https server with self-signed cert.

And I am setting a axios https-api call in a function that will run on client's side only. Then when it called the api, it threw an ERR_CERT_AUTHORITY_INVALID

I noticed many articles have motioned below code on how to by pass this.

// At instance level
const instance = axios.create({
  httpsAgent: new https.Agent({  
    rejectUnauthorized: false
  })
});
instance.get('https://something.com/foo');
// At request level
const agent = new https.Agent({  
  rejectUnauthorized: false
});
axios.get('https://something.com/foo', { httpsAgent: agent });

But this popular code only works on server side. And then I noticed that this error is triggered by chrome. So chrome should be the root cause, although I was writing javascript

So, I noticed people have talked about to configure either below one of these. I tried all and doesnt work at all

1.Insecure content

=> this is about http only. So this is not a solution for http

2. enable the domain when the site pop up.

=> This is the tricky part. Since I host my code on vercel. So at first, it is identified as secure. The error only prompt when I click submit button in my website in which it calls my API server which is in other domain, with a self-signed cert only.

For example:

const handleSubmit = async (e) => {
   
    e.preventDefault();
    
    const newPost = {
      theme: theme,
      content: content,
    };

    try {
    
      const res = await axios.post(
        `${process.env.NEXT_PUBLIC_API_URL}/${username}`,
        newPost
      );
  
    } catch (err) {
      console.log(err);
    }

Is there a easy way to let the chrome be able to call the api?