当react应用程序构建文件复制到资源目录中的spring boot公用文件夹中时,无法在刷新页面上加载react组件显示401错误

f2uvfpb9  于 2021-09-30  发布在  Java
关注(0)|答案(0)|浏览(138)

我在使用spring boot+react js刷新完整堆栈应用程序的页面时遇到问题,react构建文件被复制到spring boot应用程序的资源目录中的公用文件夹中。最初运行spring boot应用程序并在浏览器上打开localhost:8080,通常显示react组件,如登录等,我可以在react组件中导航,但一旦我在浏览器上刷新,我将react路由的错误视为401错误,我正在spring boot应用程序中使用spring security。任何人都知道如何解决这个错误
spring安全配置文件

@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主组件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刷新时控制台显示下图中的错误]

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题