Axios unable to fetch API data after deploying the React App Build

Axios calls are working perfectly while the react app functioning on localhost, But the calls are unable to fetch any data while the build is uploaded to the cpanel file manager directory. I even tested the same on Netlify.
Is there any solution to this? Please help!!!

Package.JSON

{
  "name": "admin_panel",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@react-pdf/renderer": "^1.6.7",
    "@stardust-ui/docs-components": "^0.40.0",
    "@stardust-ui/react": "^0.40.0",
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "history": "^4.10.1",
    "prop-types": "^15.7.2",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-filter-search": "^1.0.8",
    "react-lazyload": "^2.6.2",
    "react-redux": "^7.1.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0",
    "react-to-pdf": "0.0.8",
    "redux": "^4.0.4",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.88.1",
    "uuid": "^3.3.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint": "^6.5.1",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-config-prettier": "^6.4.0",
    "eslint-config-react": "^1.1.7",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-react": "^7.16.0",
    "eslint-plugin-react-hooks": "^2.1.2",
    "prettier": "^1.18.2"
  }
}

Actions.JS

import axios from "axios"

import {
  PRODUCT_ERROR,
  GET_PRODUCTS,
} from "./types"

// Get Products
export const getProducts = () => async dispatch => {
  try {
    const res = await axios.get(`http://hostServer/product/all`)

    dispatch({
      type: GET_PRODUCTS,
      payload: res.data,
    })
    // console.log(res.data)
  } catch (err) {
    dispatch({
      type: PRODUCT_ERROR,

      payload: { msg: err.response.statusText, status: err.response.status },
    })
    // console.error(err.response)
  }
}

Is the site hosted on https:? If so, is the endpoint also on https? If not, that is the problem. If the site is secure, then requests to non-secure sites will not work. This is a browser security feature.

1 Like

Let me get this thing sorted and will get back to you
Thank you so much