角应用程序的请求在春季应用程序中被CORS策略阻止

Question

我试图从角度前端发送请求到Spring后端暴露的REST控制器。 REST控制器具有@CrossOrigin注释。

我正在使用HttpClient从angular app发送请求。

请求：

  const httpOptions = {
      headers: new HttpHeaders({
        'Authorization': 'Basic ' + basicAuthHeader,
      })
    };
    return this.http.get(this.address + this.addressStorage.loginEndpoint + '/' + playerName, httpOptions);

结果：

Access to XMLHttpRequest at 'xxx' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

邮递员发送的同一请求给出了正确的答复。

我的假设：

我使用chrome dev工具检查了网络选项卡：

问题是由OPTIONS请求发送而不是GET请求引起的，而CORS只允许GET方法吗？

假设我的猜测是正确的，那么将这个组件添加到spring boot app来解决我的问题？

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsFilter implements Filter {


    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization");
        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            filterChain.doFilter(servletRequest, servletResponse);
        }
    } 

不幸的是，我目前无法改变后端实现，因此我无法自己找到它。

附加信息：

  registerPlayer(player: PlayerDTO): Observable<Object> {
    const httpOptions = {
      headers: new HttpHeaders({'Content-Type': 'application/json'}),
    };
    return this.http.post(this.address + this.addressStorage.createUserEndpoint, player, httpOptions);
  }

此请求发送到同一个控制器，但在不同的端点上返回正确的响应。

Answer 1

我相信你的服务器发送Access-Control-Allow-Credentials意味着角度你也需要通知你的服务发送请求与'Access-Control-Allow-Credentials': 'true'

更新

凭据级请求和通配符响应凭证请求时，服务器必须在Access-Control-Allow-Origin标头的值中指定原点，而不是指定“*”通配符。 Preflighted requests