来自 angular 个应用的请求被 spring 个应用中的 CORS 策略阻止

Requests from angular app blocked by CORS policy in spring app

我正在尝试从 angular 前端向 Spring 后端公开的 REST 控制器发送请求。 REST 控制器有 @CrossOrigin 注释。

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

要求:

  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.

Postman 发送的相同请求给出了正确的响应。

我的假设:

我已经使用 chrome 开发工具检查了网络选项卡:

是不是发送了OPTIONS请求而不是GET请求导致的问题 CORS 只允许 GET 方法?

假设我的猜测是正确的,那么将此组件添加到 spring 启动应用程序是否可以解决我的问题?

@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);
  }

此请求发送到同一控制器但在不同端点returns 正确响应。

我相信你的服务器发送 Access-Control-Allow-Credentials 意味着在 angular 你还需要通知你的服务发送请求 'Access-Control-Allow-Credentials': 'true'

更新

Credentialed requests and wildcards When responding to a credentialed request, the server must specify an origin in the value of the Access-Control-Allow-Origin header, instead of specifying the "*" wildcard. Preflighted requests