pre - flight响应中的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.

这是我的angular代码

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 app中，其余api与头文件appKey &内容类型

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

Answer 1

Angular2将头文件小写!

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

参见这个问题:在谷歌浏览器的api调用的交叉起源错误

我解释了如何测试angular2 -post方法来验证angular部分是否正常工作。