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

#react #redux #axios #javascript

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

Latest comments (3)

Andre • Oct 28 '19 • Edited

I had this happen to me before. In my case, the culprit was the URL of the API was not a https URL. the url for the api was not ssl secured so the browser blocked it as it was considered 'mixed content'.

Double check if the live site has ssl(https). If it does then the API url will also need to be a https link. Looking at your code it looks like it's only an http URL.

I hope this helps.