预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段答案

【问题标题】：Request header field is not allowed by Access-Control-Allow-Headers in preflight response预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段
【发布时间】：2017-01-30 16:10:57
【问题描述】：

我在前端使用 angularjs2 和 Java Spring 作为后端 rest api 并得到错误。

XMLHttpRequest cannot load 'Some url'. Request header field appkey is not allowed by Access-Control-Allow-Headers in preflight response.

这是我的角度代码。

private logInUrl = 'Some url'; // URL to JSON file


   authenticateUserCredentials(logIn: LogIn): Observable<ResponseClass> {

    let body = JSON.stringify(logIn);
    let headers = new Headers();
    headers.append('Content-type', 'application/json');
    headers.append('appKey', 'superadmin');

    let options = new RequestOptions({ headers: headers });

    return this.http.post(this.logInUrl, body, options)
                    .map(this.extractData)
                    .catch(this.handleError);
  }

以及我们使用过滤器的服务器端代码。

public final class CorsFilter extends OncePerRequestFilter{
    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)
            throws ServletException, IOException {
            // CORS "pre-flight" request
            response.addHeader("Access-Control-Allow-Origin", "*");
            response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
           // response.addHeader("Access-Control-Allow-Headers", "Content-type,X-Requested-With,Origin,accept");
            response.addHeader("x-access_token","Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
            response.addHeader("Access-Control-Max-Age", "1800");//30 min

        filterChain.doFilter(request, response);
    }
}

在 PostMan 应用程序中，其余 api 与标头 appKey 和 Content-type

都可以正常工作

这是实现 appKey 标头的正确方法，还是请建议任何其他方式在预定义标头中发送自定义标头或自定义数据。

【问题讨论】：

预检请求是一个OPTIONS，请确保在您的请求中允许OPTIONS。
您在代码中注释掉的行是设置 Access-Control-Allow-Headers 的正确方法，但错误是说它期望允许请求标头。尝试将其添加到列表中

标签： java spring-mvc angular xmlhttprequest

【解决方案1】：

Angular2 正在小写标题！

所以Content-Type 将是content-type，请检查您的后端是否允许！ :)

另请参阅此问题：Cross orgin error in google chrome for the api call

我解释了如何测试您的 Angular2-post-method 以验证 angular-part 是否正常工作。

【讨论】：

感谢您的回答，但交叉问题已通过在上面代码中显示的 java spring 添加过滤器解决。如果我删除自定义标头 appKey 则发布请求工作正常。