I m facing issue on refreshing of page on full stack App with Spring Boot+ React JS, React build files are copied into public folder in resource directory in Spring boot app. Initial running of spring boot app and opening localhost:8080 on browser ,shows react component normally like login etc and I can navigate through react component but but once I do refresh on browser I see error as 401 error for react routes , I m using spring security in Spring boot app. Any one know how to resolve this error
Spring Security Config File
@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(
securedEnabled = true,
jsr250Enabled = true,
prePostEnabled = true
)
public class SecurityConfig extends WebSecurityConfigurerAdapter
@Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
auth.userDetailsService(appUserDetailService).passwordEncoder(bCryptPasswordEncoder);
}
@Override
protected void configure(HttpSecurity http) throws Exception {
http.csrf().disable()
.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
.and()
.authorizeRequests().antMatchers(HttpMethod.GET,
"/",
"/favicon.ico",
"/**/*.png",
"/manifest.json",
"/public/**",
"/**/*.gif",
"/**/*.svg",
"/**/*.jpg",
"/**/*.html",
"/**/*.css",
"/**/*.js"
).permitAll()
.anyRequest().authenticated();
http.addFilterBefore(jwtRequestFilter, UsernamePasswordAuthenticationFilter.class);
}
}
React Main Component App.js
class App extends Component {
render() {
return (
<Provider store={store}>
<Router>
<div className="App">
<NavBar />
{
//Public Routes
}
<Route exact path="/" component={Landing} />
<Route exact path="/registercompany" component={RegisterCompany} />
<Route exact path="/login" component={Login} />
<Route exact path="/createservice" component={CreateService} />
{
//Private Routes
}
<Switch>
<SecuredRoute exact path="/dashboard" component={Dashboard} />
<SecuredRoute exact path="/updateservice/:serviceCode" component={UpdateService} />
<SecuredRoute exact path="/employees" component={EmployeeListDashboard} />
<SecuredRoute exact path="/addemployee" component={AddEmployee} />
<SecuredRoute exact path="/updateemployee/:employeecode" component={UpdateEmployee} />
<SecuredRoute exact path="/addservice" component={AddService} />
<SecuredRoute exact path="/assignservice" component={MapServiceToEmployee} />
<SecuredRoute exact path="/assetlist" component={AssetList} />
<SecuredRoute exact path="/createasset" component={CreateAsset} />
<SecuredRoute exact path="/updateasset/:assetcode" component={UpdateAsset} />
<SecuredRoute exact path="/servicerequests" component={ServiceRequestDashboard} />
</Switch>
{
//Loader
}
<FullPageLoader/>
</div>
</Router>
</Provider>
);
}
}
export default App;
React package.json
{
"name": "cleantoolfrontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.19.2",
"baseui": "^9.116.1",
"bootstrap": "^4.6.0",
"canvasjs": "^1.8.3",
"classnames": "^2.3.1",
"font-awesome": "^4.7.0",
"hashmap": "^2.4.0",
"jwt-decode": "^2.2.0",
"react": "^16.14.0",
"react-bootstrap": "^1.6.1",
"react-bootstrap-modal": "^4.2.0",
"react-dom": "^16.14.0",
"react-modal": "^3.14.2",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.4",
"react-select": "^3.2.0",
"redux": "^4.1.0",
"redux-thunk": "^2.3.0"
},
"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": {
"cross-env": "^7.0.3"
}
}
[401 Error in below image showing in console on refresh]