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.

我遇到以下问题:

(控制台)

(Angular 2代码)

( Angular 2 Code )

Spring Code

Spring Code

我为前端端口设置了一个全局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 dosnt出错.

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.

首先，您需要创建一个滤豆:

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屋！