Question

我在前端＆amp;中使用 angularjs2 Java Spring 作为后端休息api＆amp;得到错误。

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＆amp;内容类型

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

Answer 1

Angular2会对标题进行较低的设置！

所以Content-Type将为content-type，请检查您的后端是否会允许它！：）

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

在那里，我解释了如何测试你的Angular2-post方法，以验证角度部分是否正常工作。

预检响应

1 个答案: