Angular 2 Spring Boot 登錄 CORS 問題

Question

我正在嘗試使用 Spring Boot 作為后端和 Angular 2 作為前端開發應用程序。

實際上，當我從 spring 訪問 mvc 登錄頁面時，我遇到了連接問題。

我遇到以下問題：

（控制台）

（角2代碼）

彈簧代碼

我為前端端口設置了全局 Cors 配置。 我的請求返回響應狀態 200。但我無法訪問響應，因為我在控制台中收到錯誤消息。

Spring 沒有錯誤。

Answer 1

您需要了解的第一件事是在后端添加 Cors 配置。 您不需要在來自 Angular2 App 的每個請求中發送 cors 標頭。 了解這一點，通過在 spring 安全配置類中添加全局 CORS 配置可以輕松解決此問題。

首先，您需要創建一個過濾器 bean：

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

public MyCorsFilter () {
    super();
}

@Override
public final void doFilter(final ServletRequest req, final ServletResponse res, final FilterChain chain) throws IOException, ServletException {
    final HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");

    // without this header jquery.ajax calls returns 401 even after successful login and SSESSIONID being succesfully stored.
    response.setHeader("Access-Control-Allow-Credentials", "true");

    response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "X-Requested-With, Authorization, Origin, Content-Type, Version");
    response.setHeader("Access-Control-Expose-Headers", "X-Requested-With, Authorization, Origin, Content-Type");

    final HttpServletRequest request = (HttpServletRequest) req;
    if (!request.getMethod().equals("OPTIONS")) {
        chain.doFilter(req, res);
    } else {
        // do not continue with filter chain for options requests
    }
}

@Override
public void destroy() {

} 

@Override
public void init(FilterConfig filterConfig) throws ServletException {       
}
}

第 2 步：在您的 spring 安全配置類中添加：

@Autowired
private MyCorsFilter myCorsFilter;


//CORS
http.addFilterBefore(myCorsFilter, ChannelProcessingFilter.class);

編輯：此配置假設您在 localhost:3000 上運行 angular2 應用程序

Answer 2

如果您正在使用 Spring 4.2 和更多版本，則可以提供對 CORS 開箱即用的一流支持。 閱讀本頁。

您可以通過在類級別定義以下注釋來逃脫：

@CrossOrigin(origins = "http://localhost:3000", maxAge = 3600)