我在前端使用 angularjs2 ＆ Java Spring 作为后端休息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 app中，其余api正常工作，两个头文件 appKey & Content-type
这是实现appKey标头的正确方法，还是建议在预定义标头中发送自定义标头或自定义数据的任何其他方式 .
1 回答
Angular2 is lower-casing the headers!
所以
Content-Type将是content-type，检查你的后端是否会允许它！ :)另见这个问题：Cross orgin error in google chrome for the api call
在那里，我解释了如何测试你的Angular2-post方法来验证角度部分是否正常工作 .