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 });
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.
Solution:
we need to enable CORS from server side so that we can fetch data from front side.
To Enable this we need to add one function in server side application.
I'm using spring boot so, you need to add this function in you main application class
@Bean
public
WebMvcConfigurer corsConfigurer() {
return
new
WebMvcConfigurer() {
@Override
public
void
addCorsMappings(CorsRegistry registry) {
registry.addMapping(
"
/**"
).allowedOrigins(
"
http://localhost:3000"
);
See the whole main application class add function like this:
package
com.javaguidestutorials.reactspringboot;
import
org.springframework.boot.SpringApplication;
import
org.springframework.boot.autoconfigure.SpringBootApplication;
import
org.springframework.context.annotation.Bean;
import
org.springframework.web.servlet.config.annotation.CorsRegistry;
import
org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@SpringBootApplication
public
class
ReactSpringbootApplication {
public
static
void
main(
String
[] args) {
SpringApplication.run(ReactSpringbootApplication.
class
, args);
@Bean
public
WebMvcConfigurer corsConfigurer() {
return
new
WebMvcConfigurer() {
@Override
public
void
addCorsMappings(CorsRegistry registry) {
registry.addMapping(
"
/**"
).allowedOrigins(
"
http://localhost:3000"
);
Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad
spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or
edit the question
and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it.
Provide an answer or move on to the next question.
Let's work to help developers, not make them feel stupid.
