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

@technophyle, apologies for screenshot please have a look i have fixed it — Sharanjeet Singh, Sep 22 '22 at 03:01
Yeah, if you can upload a screenshot of error in the Network tab, that'd be helpful. — technophyle, Sep 22 '22 at 03:02
@JaromandaX - it does say status 200 in network console but in the response tab it is empty and i needed the token from there like it is in postman query — Sharanjeet Singh, Sep 22 '22 at 03:11
You should screenshot the one with the red color. Not the OPTIONS request. — technophyle, Sep 22 '22 at 03:13
OPTIONS is a CORS preflight - that WONT have any response data - check the response in the request that uses POST method — Jaromanda X, Sep 22 '22 at 03:15
@JaromandaX, i have change the screenshot and there is no request with post method in the network tab, don't know what's wrong now? — Sharanjeet Singh, Sep 22 '22 at 03:21
That's not the correct one either. Click through all red ones and see if Response tab has anything useful. — technophyle, Sep 22 '22 at 03:43
@technophyle, it is confirm that it is CORS erro but how can i fix this without access to the server files? — Sharanjeet Singh, Sep 22 '22 at 05:38
@SharanjeetSingh The proper fix should be on the server. For temporary testing, you can install CORS extension on Chrome, that can help you bypass the security check. — technophyle, Sep 22 '22 at 07:14

score 0 · Answer 1 · answered Sep 25 '22 at 08:35

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")

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

1 Answers1