Not getting data by axios.get() request in reactjs from spring boot backend

I trying to fetch data from spring boot controller but the data not appeared in front side ReactJS.

Spring boot controller working fine in localhost and data also appeared in localhost.

Spring Boot Controller:

package com.javaguidestutorials.reactspringboot.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.javaguidestutorials.reactspringboot.model.Employee;
import com.javaguidestutorials.reactspringboot.repository.EmployeeRepository;

@CrossOrigin(origins="http://localhost:3000/")
@RestController
@RequestMapping("/api/v1/")
public class EmployeeController {

    @Autowired
    private EmployeeRepository employeeRepository;
    
    // get all employees
    
    @GetMapping("/employees")
    public List<Employee> getAllEmployees()
    {
        
        return employeeRepository.findAll();
        
    }
    
    //Add employee
    
    @PostMapping("/employees")
    public Employee addEmployee(@RequestBody Employee employee)
    {
        return employeeRepository.save(employee); 
    }
}

ReactJS Employee service:

import axios from 'axios';

const EMPLOYEE_API_BASE_URL = "http://localhost:9090/api/v1/employees";

class EmployeeService{

    getEmployees(){

        return axios.get(EMPLOYEE_API_BASE_URL);
    }
}

export default new EmployeeService()

getEmployee function attached to EmployeeComponent:

componentDidMount(){
        EmployeeService.getEmployees().then((res) => {
            this.setState({ employees : res.data });
        });
    }

Package.json:

{
  "name": "react-springboot",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.2",
    "axios": "^0.21.1",
    "axios-cookiejar-support": "^1.0.1",
    "bootstrap": "^4.6.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "tough-cookie": "^4.0.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Getting Error Like:

xhr.js:177 GET http://localhost:9090/api/v1/employees 403
dispatchXhrRequest @ xhr.js:177
xhrAdapter @ xhr.js:13
dispatchRequest @ dispatchRequest.js:52
Promise.then (async)
request @ Axios.js:61
Axios.<computed> @ Axios.js:76
wrap @ bind.js:9
getEmployees @ EmployeeService.js:9
componentDidMount @ ListEmployeeComponent.jsx:20
commitLifeCycles @ react-dom.development.js:20663
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
(anonymous) @ index.js:8
./src/index.js @ index.js:19
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
1 @ Footer.css?f24e:82
__webpack_require__ @ bootstrap:856
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
createError.js:16 Uncaught (in promise) Error: Request failed with status code 403
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:62)

Spring Boot GET REST APIs working fine in post man:1

Error in localhost:3000 in ReactJS:2

63 thoughts on “Not getting data by axios.get() request in reactjs from spring boot backend”

  1. Pingback: priligy for pe
  2. Pingback: stromectol 300 mg
  3. Pingback: viagra otc us
  4. 17699 197500The vacation delivers on offer are : believed a selection of some of the most selected and moreover budget-friendly global. Any of these lodgings tend to be very used along units might accented by indicates of pretty shoreline supplying crystal-clear turbulent waters, concurrent with the Ocean. hotels packages 836503

    Reply

Leave a Comment