Unable to load react component on refresh page shows 401 error, When React app build files are copied into Spring boot public folder in resource dir

Viewed 313

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]

0 Answers
Related