ionic4 HTTP请求

Question

我有一个，我也试图从一个ionic4 web应用程序发送POST请求。不幸的是，我无法让登录帖子工作。当HTTP 401、403或200只发送飞行前选项请求时，我会收到它。

我已经在StackOverflow上检查过类似的帖子，比如这，但是它们只是改变了我所得到的错误。下面是我从不同的教程中获取了一些信息后得出的结论&其他的文章。

不确定我的错误是否与Spring、SecurityConfiguration或TypeScript post请求有关。

我的Spring安全配置

@EnableWebSecurity
@Configuration
@Order(SecurityProperties.ACCESS_OVERRIDE_ORDER)
@EnableGlobalMethodSecurity(securedEnabled = true)
class SecurityConfiguration extends WebSecurityConfigurerAdapter {

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

        http
            .authorizeRequests()

            .requestMatchers(CorsUtils::isPreFlightRequest).permitAll()
            .antMatchers("/login").permitAll()
            .antMatchers(HttpMethod.OPTIONS).permitAll()
            .anyRequest().authenticated()
            .and()
            .addFilterBefore(new RestConfig().corsFilter(), CsrfFilter.class)
            .csrf().csrfTokenRepository(csrfTokenRepository()).and().addFilterAfter(csrfHeaderFilter(), CsrfFilter.class)
            .formLogin().loginProcessingUrl("/login")
            .successHandler(successHandler())
            .failureHandler(failureHandler())
            .and()
            .exceptionHandling()
            .and()
            .csrf().disable();
    }

    private AuthenticationSuccessHandler successHandler() {
        return new AuthenticationSuccessHandler() {

            @Override
            public void onAuthenticationSuccess(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Authentication authentication) throws IOException, ServletException {
                httpServletResponse.getWriter().append("OK");
                httpServletResponse.setStatus(200);
            }
        };
    }

    private AuthenticationFailureHandler failureHandler() {
        return new AuthenticationFailureHandler() {

            @Override
            public void onAuthenticationFailure(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, AuthenticationException e) throws IOException, ServletException {
                httpServletResponse.getWriter().append("Authentication failure");
                httpServletResponse.setStatus(401);
            }
        };
    }

    private AccessDeniedHandler accessDeniedHandler() {
        return new AccessDeniedHandler() {

            @Override
            public void handle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, AccessDeniedException e) throws IOException, ServletException {
                httpServletResponse.getWriter().append("Access denied");
                httpServletResponse.setStatus(403);
            }
        };
    }

    private AuthenticationEntryPoint authenticationEntryPoint() {
        return new AuthenticationEntryPoint() {

            @Override
            public void commence(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, AuthenticationException e) throws IOException, ServletException {
                httpServletResponse.getWriter().append("Not authenticated");
                httpServletResponse.setStatus(401);
            }
        };
    }

    private Filter csrfHeaderFilter() {
        return new OncePerRequestFilter() {

            @Override
            protected void doFilterInternal(HttpServletRequest request,
                                        HttpServletResponse response, FilterChain filterChain)
                throws ServletException, IOException {
                     CsrfToken csrf = (CsrfToken) request.getAttribute(CsrfToken.class.getName());
                     if (csrf != null) {
                         Cookie cookie = WebUtils.getCookie(request, "XSRF-TOKEN");
                        String token = csrf.getToken();
                        if (cookie == null || token != null
                        && !token.equals(cookie.getValue())) {
                            cookie = new Cookie("XSRF-TOKEN", token);
                            cookie.setPath("/");
                            response.addCookie(cookie);
                        }
                    }
                response.setHeader("Access-Control-Allow-Origin", "*");
                response.setHeader("Access-Control-Allow-Headers", "*");
                response.setHeader("Access-Control-Allow-Credentials", "*");
                response.setHeader("Access-Control-Allow-Methods", "*");
                response.setHeader("Access-Control-Max-Age", "3600");
                filterChain.doFilter(request, response);
            }
        };
    }

    private CsrfTokenRepository csrfTokenRepository() {
        HttpSessionCsrfTokenRepository repository = new HttpSessionCsrfTokenRepository();
        repository.setHeaderName("X-XSRF-TOKEN");
        repository.setSessionAttributeName("_csrf");
        return repository;
   }

我的TypeScript帖子

onLogin(loginData: {username: string, password: string}) {
    let headers = new Headers();
    headers.append('Access-Control-Allow-Credentials', 'true');
    headers.append('Content-Type','application/x-www-form-urlencoded');
    headers.append("Authorization", "Basic " + btoa(loginData.username + ":" + loginData.password));


    let body = {
        username: loginData.username,
        password: loginData.password
    }
    this.http.post('http://localhost:5000/login', body, {headers: headers, withCredentials: true})
      .map(res => res.json())
      .subscribe(data => {
          console.log(data);
          console.log(data.status)
       });
  }
}

上面的代码出错了，我知道这不是登录的细节，因为相同的用户名和密码可以很好地工作，而不是在帖子中。

​

​

Answer 1

我就是这样解决这个问题的。

onLogin(loginData: {username: string, password: string}) {
  let headers = new Headers();
  headers.append('Access-Control-Allow-Credentials', 'true');
  headers.append('Content-Type','application/x-www-form-urlencoded');

  let body = `username=${loginData.username}&password=${loginData.password}`;

  this.http.post('http://localhost:5000/login', body, {headers: headers})

    .map(res => res)
    .subscribe(data => {
      console.log(data.status);
      if (data.status == 200) {
        this.navCtrl.push(TabsPage);
      }
      else {
        this.showError("Invalid username or password");
      }

    });
}

更新:主要问题是URL编码 --这一行：

let body = `username=${loginData.username}&password=${loginData.password}`;

多亏了持续时间