来自 angular 个应用的请求被 spring 个应用中的 CORS 策略阻止
Requests from angular app blocked by CORS policy in spring app
我正在尝试从 angular 前端向 Spring 后端公开的 REST 控制器发送请求。
REST 控制器有 @CrossOrigin
注释。
我正在使用 HttpClient 从 angular 应用发送请求。
要求:
const httpOptions = {
headers: new HttpHeaders({
'Authorization': 'Basic ' + basicAuthHeader,
})
};
return this.http.get(this.address + this.addressStorage.loginEndpoint + '/' + playerName, httpOptions);
结果:
Access to XMLHttpRequest at 'xxx' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
Postman 发送的相同请求给出了正确的响应。
我的假设:
我已经使用 chrome 开发工具检查了网络选项卡:
是不是发送了OPTIONS请求而不是GET请求导致的问题
CORS 只允许 GET 方法?
假设我的猜测是正确的,那么将此组件添加到 spring 启动应用程序是否可以解决我的问题?
@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsFilter implements Filter {
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) servletResponse;
HttpServletRequest request = (HttpServletRequest) servletRequest;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization");
if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
response.setStatus(HttpServletResponse.SC_OK);
} else {
filterChain.doFilter(servletRequest, servletResponse);
}
}
不幸的是,我目前无法更改后端实现,所以我无法自己找到它。
附加信息:
registerPlayer(player: PlayerDTO): Observable<Object> {
const httpOptions = {
headers: new HttpHeaders({'Content-Type': 'application/json'}),
};
return this.http.post(this.address + this.addressStorage.createUserEndpoint, player, httpOptions);
}
此请求发送到同一控制器但在不同端点returns 正确响应。
我相信你的服务器发送 Access-Control-Allow-Credentials
意味着在 angular 你还需要通知你的服务发送请求 'Access-Control-Allow-Credentials': 'true'
更新
Credentialed requests and wildcards
When responding to a credentialed request, the server must specify an origin in the value of the Access-Control-Allow-Origin header, instead of specifying the "*" wildcard.
Preflighted requests
我正在尝试从 angular 前端向 Spring 后端公开的 REST 控制器发送请求。
REST 控制器有 @CrossOrigin
注释。
我正在使用 HttpClient 从 angular 应用发送请求。
要求:
const httpOptions = {
headers: new HttpHeaders({
'Authorization': 'Basic ' + basicAuthHeader,
})
};
return this.http.get(this.address + this.addressStorage.loginEndpoint + '/' + playerName, httpOptions);
结果:
Access to XMLHttpRequest at 'xxx' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
Postman 发送的相同请求给出了正确的响应。
我的假设:
我已经使用 chrome 开发工具检查了网络选项卡:
是不是发送了OPTIONS请求而不是GET请求导致的问题 CORS 只允许 GET 方法?
假设我的猜测是正确的,那么将此组件添加到 spring 启动应用程序是否可以解决我的问题?
@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsFilter implements Filter {
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) servletResponse;
HttpServletRequest request = (HttpServletRequest) servletRequest;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization");
if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
response.setStatus(HttpServletResponse.SC_OK);
} else {
filterChain.doFilter(servletRequest, servletResponse);
}
}
不幸的是,我目前无法更改后端实现,所以我无法自己找到它。
附加信息:
registerPlayer(player: PlayerDTO): Observable<Object> {
const httpOptions = {
headers: new HttpHeaders({'Content-Type': 'application/json'}),
};
return this.http.post(this.address + this.addressStorage.createUserEndpoint, player, httpOptions);
}
此请求发送到同一控制器但在不同端点returns 正确响应。
我相信你的服务器发送 Access-Control-Allow-Credentials
意味着在 angular 你还需要通知你的服务发送请求 'Access-Control-Allow-Credentials': 'true'
更新
Credentialed requests and wildcards When responding to a credentialed request, the server must specify an origin in the value of the Access-Control-Allow-Origin header, instead of specifying the "*" wildcard. Preflighted requests