Axios Network error on post request React.js but works on Postman

Question

I did a post request in Postman with adding Api-key in header from Authorization options which works completely fine but when i tried to do the same thing in React.js it gives me Network error. I think i'm missing anythink in my post request but don't know what.

Note:- I don't have the access to the server so can't change anything in their.

Code for request

import React, { useEffect } from 'react'
import axios from 'axios';



function Card() {

    useEffect(() => {

        axios.post("url is provided", { data: "" },
            {
                withCredentials: true,
                headers:
                {
                    'Api-key': 'api-key is provided',
                    'Content-Type': 'application/json',
                },
            }
        )
            .then((response) => console.log(response, "response"))
            .catch((err) => console.log(err, "err"))

    }, [])


    return (
        <div className='card'>
            
        </div>
    )
}

export default Card

Post Man

Error in Console

Network tab

Answer 1

If you are using create-create-app for the client, you can use a proxy so that the request will go like this:

Client -> React Server (Proxy) -> Backend endpoint

This way, it will look like you're sending a request to your server and the browser doesn't complain.

Add a proxy field in package.json

"proxy": "https://backend-enpoint-here.com/"

now in the frontend you can simply call

axios.post("/api/some-endpoint")