从源 'http://localhost:3000' 在 'http://localhost:8080/home/data' 访问 XMLHttpRequest

Question

好吧，我有一个带有安全性的 Spring 引导应用程序的后端。 这是安全配置的样子：

 @Override
protected void configure(HttpSecurity http) throws Exception {

    http.cors()
            .and()
            .authorizeRequests()
            .antMatchers("/home/**")
            .authenticated()
            .and()
            .formLogin()
    .defaultSuccessUrl("/home")
            .and()
            .logout()
            .logoutRequestMatcher(new AntPathRequestMatcher("/logout"))
            .logoutSuccessUrl("/login")
            .invalidateHttpSession(true)        // set invalidation state when logout
            .deleteCookies("JSESSIONID");

对于前端，我有一个 React.js 应用程序。 如果您在此应用程序上按下按钮，则应执行对此 url 的 GET 请求： 'http://localhost:8080/home/hives

这是我在 React.js 中的代码 getDataAxios(){

     axios.get('http://localhost:8080/home/data', {
        mode: "no-cors",
        auth: {
            username: 'user.user@provider.io',
            password: 'password'
          }
      })
      .then(function (response) {
        console.log(response);
      })
}

问题是，当按下执行此 function 的按钮时，我在浏览器控制台上收到此异常：

Access to XMLHttpRequest at 'http://localhost:8080/home/data' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Answer 1

好吧，我有一个带有安全性的 Spring 引导应用程序的后端。 这是安全配置的样子：

 @Override
protected void configure(HttpSecurity http) throws Exception {

    http.cors()
            .and()
            .authorizeRequests()
            .antMatchers("/home/**")
            .authenticated()
            .and()
            .formLogin()
    .defaultSuccessUrl("/home")
            .and()
            .logout()
            .logoutRequestMatcher(new AntPathRequestMatcher("/logout"))
            .logoutSuccessUrl("/login")
            .invalidateHttpSession(true)        // set invalidation state when logout
            .deleteCookies("JSESSIONID");

对于前端，我有一个 React.js 应用程序。 如果您在此应用程序上按下按钮，则应执行对此 url 的 GET 请求： 'http://localhost:8080/home/hives

这是我在 React.js 中的代码 getDataAxios(){

     axios.get('http://localhost:8080/home/data', {
        mode: "no-cors",
        auth: {
            username: 'user.user@provider.io',
            password: 'password'
          }
      })
      .then(function (response) {
        console.log(response);
      })
}

问题是，当按下执行此 function 的按钮时，我在浏览器控制台上收到此异常：

Access to XMLHttpRequest at 'http://localhost:8080/home/data' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.