Spring Boot Angular 2 和 Access-Control-Allow-Origin 在服务器上不起作用

Question

我有一个带有 RestController、自定义安全过滤器和一个 Angular 2 应用程序的 Spring Boot 应用程序，它从 spring 服务请求数据。

由于 Access-Control-Allow-Origin 问题，我有一个设置标题的过滤器。

如果我将 localhost:4200 调用到 localhost:8080，这可以正常工作，但从 localhost:4200 到某些 ip xx.xx.xx.xx:8080 则不起作用。

那么有人有想法吗？

这是我的过滤器：

@Component
public class MyCorsFilter implements Filter {

    public MyCorsFilter() {
        System.out.println("init filter corsssss");
    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {

        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;

        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me");

        chain.doFilter(req, res);
    }

    @Override
    public void init(FilterConfig filterConfig) {
    }

    @Override
    public void destroy() {
    }
}

Answer 1

我有同样的问题。

在你的控制器中试试这个：

@Context
private HttpServletResponse servletResponse;

private void allowCrossDomainAccess() {
    if (servletResponse != null) {
        servletResponse.setHeader("Access-Control-Allow-Origin", "*");
    }
}

然后在您的 POST/GET 方法中：

@CrossOrigin
@RequestMapping(value = "/login", method = RequestMethod.POST, consumes = "application/json")
public boolean loginController(@RequestBody User user) throws JSONException, NoSuchAlgorithmException, UnsupportedEncodingException {

    allowCrossDomainAccess();  
    return userService.login(user);
}

最好的问候，

Answer 2

这是一项安全功能。在 Spring 中，您应该控制谁可以访问您的内容，而不是允许任何来源：

@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
...
@Override
protected void configure(HttpSecurity http) throws Exception {
    http.csrf().csrfTokenRepository(csrfTokenRepository());
}
    ...
@Bean
public CsrfTokenRepository csrfTokenRepository() { 
    CookieCsrfTokenRepository repository = new CookieCsrfTokenRepository();
    repository.setHeaderName("X-XSRF-TOKEN");
    repository.setCookieHttpOnly(false);
    return repository;
}

然后在 Angular 中更改您的 app.module.ts

import { HttpModule, XSRFStrategy, CookieXSRFStrategy } from '@angular/http';

export function xsrfFactory() { return new CookieXSRFStrategy('XSRF-TOKEN', 'x-xsrf-token'); }
...
  providers: [
     ...
        { provide: XSRFStrategy, useFactory: xsrfFactory },
...

这样，您的 REST 调用将附加 cookie 参数。

或者你也可以这样做——我不建议这样做，但如果你现在不想担心这个可能会有用：

@Override
protected void configure(HttpSecurity http) throws Exception {
    http.csrf().disable();
}