无法使用角度 $http 将授权标头发送到弹簧后端

Question

我正在尝试为在我的应用程序客户端使用 $http 发出的请求添加一个 Authorization 标头。

我正在使用 nodejs 为我的客户端应用程序提供服务，并为我的后端使用带有 spring boot 的 java。

我添加了以下过滤器来启用 CORS：

public class CorsFilter extends GenericFilterBean {
private static final Logger logger = Logger.getLogger(CorsFilter.class);
@Override
public void doFilter(ServletRequest request, ServletResponse response,
        FilterChain chain) throws IOException, ServletException {
    logger.info("Enable cors filter");
    HttpServletResponse res = (HttpServletResponse) response;
    res.addHeader("Access-Control-Allow-Origin", "http://localhost:3000");
    res.addHeader("Access-Control-Allow-Credentials", "true");
    res.addHeader("Access-Control-Allow-Methods", "POST, GET, HEAD, OPTIONS");
    res.addHeader("Access-Control-Allow-Headers", "Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization");
    chain.doFilter(request, response);

   }
}

我正在设置一个包含令牌的授权标头，其中包含以下行：

$http.defaults.headers.common.Authorization = 'Bearer ' + token;

然而 angular 似乎完全忽略了这个标头，当我检查在 chrome 中发出的请求时，我看到了：

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:he-IL,he;q=0.8,en-US;q=0.6,en;q=0.4
Access-Control-Request-Headers:accept, access-control-expose-headers, authorization
Access-Control-Request-Method:GET
Cache-Control:no-cache
Connection:keep-alive
Host:localhost:8080
Origin:http://localhost:3000
Pragma:no-cache
Referer:http://localhost:3000/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.124 Safari/537.36

不追踪授权标头。

我在响应中的 Access-Control-Allow-Headers 标头中添加了“授权”，CORS 似乎运行正常，并且我已将我的 CORS 过滤器设置为如下：

     @Bean
 public FilterRegistrationBean corsFilter() {
     final FilterRegistrationBean registrationBean = new FilterRegistrationBean();
     registrationBean.setFilter(new CorsFilter());
     registrationBean.addUrlPatterns("/*");
     registrationBean.setOrder(Ordered.HIGHEST_PRECEDENCE);

     return registrationBean;
  }

所以它应该首先出现在所有 URL 模式上。
那我错过了什么？

Answer 1

问题的解决方案在 cmets 中，所以我在这里编辑了这些：

您在 chrome 中看到的请求是 CORS 访问请求。方法=选项。这是由浏览器完成的，而不是由角度完成的。您的 CORSFilter 可能应该处理 OPTION 请求。

问题是由一个期望授权标头的 jwt 过滤器引起的，也在 OPTION 请求上。

通过添加一个条件来解决，如果方法不是 OPTION，则仅继续进行 jwt 验证。