Angular 2 Spring Boot 登录 CORS 问题 [英] Angular 2 Spring Boot Login CORS Problems

问题描述

我正在尝试使用 Spring Boot 作为后端和 Angular 2 作为前端开发应用程序.

I am trying to develop an application with Spring Boot for the back end and Angular 2 for the front end.

实际上我遇到了连接问题，当我从 spring 访问 mvc 登录页面时.

Actually i have connection problems, when i accessing on the mvc login page from spring.

我遇到以下问题:

(控制台)

(角 2 代码)

Spring 代码

我为前端端口设置了全局 Cors 配置.我的请求返回响应状态 200.但我无法访问响应，因为我在控制台中收到错误消息.

I have set a global Cors Configuration for the FrontEnd port. My Request returns with the Response status 200. But i cant access the Response because i getting the error message in the Console.

Spring 没有错误.

Spring dosnt have errors.

推荐答案

首先需要了解的 Cors 配置是在后端添加的.您不需要在来自 Angular2 App 的每个请求中发送 cors 标头.了解这一点，通过在您的 spring 安全配置类中添加全局 CORS 配置可以轻松解决此问题.

First thing you need to understand Cors configuration is added in the backend. You do not need to send cors header with each request from Angular2 App. Understanding that, this problem is easily fixed by adding global CORS configuration in your spring security configuration class.

首先你需要创建一个过滤器bean:

First you need to create a filter 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 安全配置类中添加:

STEP 2: In your spring security configuration class add :

@Autowired
private MyCorsFilter myCorsFilter;


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

此配置假设您在 localhost:3000 上运行 angular2 应用程序

EDIT : This configuration assumes you have angular2 app running at localhost:3000

这篇关于Angular 2 Spring Boot 登录 CORS 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！