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

Question

我在前端使用 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 标头的正确方法吗？或者请建议任何其他方法来发送预定义标头中的自定义标头或自定义数据。

Answer 1

Angular2 将标题小写！

所以

Content-Type

将是

content-type

，检查您的后端是否允许！ :)

另请参阅这个问题：Cross Orgin error in google chrome for the api call

我解释了如何测试你的 Angular2-post-method 以验证角度部分是否正常工作。