angular2弹簧靴跨源cors

Question

我的项目遇到了跨源cors问题。 我必须从运行在localhost：4200的Angular2应用程序向具有某些标头属性的运行在localhost：8080的Spring Boot后端发送获取请求。 我要发送的请求如下所示：

test() {
  let jwt = localStorage.getItem('token');
  let headers = new Headers({
        'Content-Type': 'application/json; charset=utf-8',
        'Authorization': 'Bearer ' + jwt 
    });

    let options = new RequestOptions({ headers: headers });
    this.http.get('http://localhost:8080/service/events/byTeamId/1', options)
        .map((response: Response) => response.json())
        .subscribe(
            data => console.log('Response: '+data),
            err => console.log('error: '+err),
            () => console.log('Secret Quote Complete')
        );


}

但是这个请求没有到达服务器端我怎么想要它。 与Postman一起测试api可以正常工作。

我的Spring Boot Backend看起来像这样：

WebSecurityConfig.java：

@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(securedEnabled = true)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    private RedirectStrategy redirectStrategy = new DefaultRedirectStrategy();

    @Autowired
private SimpleCorsFilter simpleCorsFilter;

@Resource
private UserDetailsServiceImpl userDetailsService;

@Resource
private JwtAuthenticationProvider jwtAuthenticationProvider;

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
            .authorizeRequests()
                .antMatchers("/", "/home", "/login", "/register").permitAll()
                .anyRequest().authenticated()
                .and()
            .addFilterBefore(simpleCorsFilter, ChannelProcessingFilter.class)
            .addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class)
            .logout()
                .permitAll()
            .and().csrf().disable();

}...

我的SimpleCorsFilter看起来像这样：

    @Component
public class SimpleCorsFilter implements Filter {

    private final Logger log = LoggerFactory.getLogger(SimpleCorsFilter.class);

    public SimpleCorsFilter() {
        log.info("SimpleCORSFilter init");
    }

    @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", "http://localhost:4200");
        //response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        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", "Content-Type, Accept, X-Requested-With, remember-me, Authorization");

        chain.doFilter(req, res);
    }

    @Override
    public void init(FilterConfig filterConfig) {
    }

    @Override
    public void destroy() {
    }

}

机智的邮递员，它工作正常：

邮递员获取请求

但是，当我在Chrome浏览器中对其进行测试时，我得到：

Chrome请求

因此，对我来说，我的后端好像没有收到“ Authorization”之类的标头属性。 我也可以通过在Spring Boot后端中调试请求来查看此信息。 我只是看到“ null”作为此请求的标头。

有谁知道为什么我在api端点上没有正确获得我的请求标头？

我已经在这里看了一下：

restlet.com/blog/2016/09/27/how-to-fix-cors-problems/

并研究了stackoverflow上发布的几个类似问题。

Answer 1

对我来说，它适用于以下解决方案：将其添加到spring安全配置中：

.antMatchers(org.springframework.http.HttpMethod.OPTIONS, "/service/**").permitAll()

http
.authorizeRequests()
                .antMatchers("/", "/home", "/login", "/register").permitAll()
                .antMatchers(org.springframework.http.HttpMethod.OPTIONS, "/service/**").permitAll()
                .anyRequest().authenticated()
                .and()
            .addFilterBefore(simpleCorsFilter, ChannelProcessingFilter.class)
            .addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class)
            .logout()
                .permitAll()
            .and().csrf().disable();

（jwt令牌仍然是必需的，我想如何拥有它）

从：

CORS Origin Spring Boot Jhipster-飞行前失败

Answer 2

我遇到过同样的问题，我正在使用Spring Boot for api和Angular 2.3.1 。 我不确定您是否正在使用Npm和Angular Cli。 如果您使用npm进行开发，则可以执行以下操作来解决此问题。 您可以将api调用代理到您的后端。

步骤1：在与package.json相同的目录中创建一个名为proxy.conf.json的文件 ，内容如下

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false,
    "pathRewrite": {"^/api" : ""}
  }
}

因此，您将使用/api/service/events/byTeamId/1而不是使用http://localhost:8080/service/events/byTeamId/1 /api/service/events/byTeamId/1

注意添加的“ / api”和删除的“ http：// localhost：8080 ”。 这意味着任何以/ api开头的请求都将被代理。 这就是您想要的，因为您不仅希望代理任何URL。 "pathRewrite": {"^/api" : ""}确保删除“ / api”，以便最后请求您的实际URL。

步骤2：更新package.json

更新行"start": "ng serve",并将其更改为"start": "ng serve --proxy-config proxy.conf.json",这将确保已配置并使用了代理

步骤3：使用npm start

在使用angular cli并确保您位于项目目录中时，现在可以在使用代理请求的地方启动应用程序

npm start

Angular Cli文档