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;
@GetMapping("/employees")
public List<Employee> getAllEmployees()
{
return employeeRepository.findAll();
}
@PostMapping("/employees")
public Employee addEmployee(@RequestBody Employee employee)
{
return employeeRepository.save(employee);
}
}
ReactJS services:
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 mount to component:
componentDidMount(){
EmployeeService.getEmployees().then((res) => {
this.setState({ employees : res.data });
});
}
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)
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"
]
}
}
What I have tried:
Solutions that I tried:
Access to XMLHttpRequest at 'http://localhost:9090/api/v1/employees' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control- Allow-Origin' header is present on the requested resource.
1) After getting the this error,I added extension in google chrome for allowing
CORS.And then it works fine,but after sometime again it gives same error.
2) I tried to update Axios version.
3) Then I install "axios-cookiejar-support" in reactJS but still getting same error.
I don't understand where was I wrong in code ?