DEV Community

Subho Karmakar
Subho Karmakar

Posted on

 

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

Top comments (3)

Collapse
 
andrebclark profile image
Andre • 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.

Collapse
 
mesubhokarma profile image
Subho Karmakar

Let me get this thing sorted and will get back to you
Thank you so much for the help.

Collapse
 
andrebclark profile image
Andre

Did that solve it?

Visualizing Promises and Async/Await 🤯

async await

Learn the ins and outs of Promises and Async/Await!