1. 問(wèn)題背景
在開發(fā)一個(gè)請(qǐng)假銷假管理系統(tǒng)時(shí)，我采用前后端分離的技術(shù)方案，具體如下圖所示：
其中，后臺(tái)登錄的Rest API為http://localhost:9090/token/user/login.
前端angular 2中利用Http請(qǐng)求Rest API的get/post/put/delete封裝在api.service.ts中，具體代碼如下：
export class ApiService {
private expiredTime: number = 30 * 60 * 1000; // token時(shí)間30分鐘
constructor(private http: Http,
private jwtService: JwtService) {
}
private setHeader(): Headers {
let headersConfig = {
'Content-Type': 'application/json',
'Accept': 'application/json'
};
if (this.jwtService.getToken()) {
headersConfig['Authorization'] = `Token ${this.jwtService.getToken()}`;
headersConfig['token'] = this.jwtService.getToken();
headersConfig['X-Auth-Token'] = this.jwtService.getToken();
}
return new Headers(headersConfig);
}
private formatErrors(error: any) {
return Observable.throw(error.json());
}
get(path: string, params: URLSearchParams = new URLSearchParams()): Observable<any> {
return this.http.get(`${environment.api_url}${path}`, {headers: this.setHeader(), search: params})
.catch(this.formatErrors)
.map((res: Response) => res.json());
}
put(path: string, body: Object = {}): Observable<any> {
return this.http.put(`${environment.api_url}${path}`,
JSON.stringify(body),
{headers: this.setHeader()})
.catch(this.formatErrors)
.map((res: Response) => res.json());
}
post(path: string, body: Object = {}): Observable<any> {
return this.http.post(
`${environment.api_url}${path}`,
JSON.stringify(body),
{headers: this.setHeader()})
.catch(this.formatErrors)
.map((res: Response) => res.json());
}
delete(path: string): Observable<any> {
return this.http.delete(
`${environment.api_url}${path}`,
{headers: this.setHeader()}
)
.catch(this.formatErrors)
.map((res: Response) => res.json());
}
}
其中setHeader()是用來(lái)設(shè)置請(qǐng)求頭的方法。
2. 問(wèn)題描述
在開發(fā)環(huán)境下運(yùn)行angular 2工程時(shí)并沒(méi)有出現(xiàn)任何錯(cuò)誤。但是部署在生產(chǎn)環(huán)境下時(shí)，經(jīng)常出現(xiàn)首次登錄成功后，過(guò)段時(shí)間token過(guò)期時(shí)重新登錄，會(huì)發(fā)現(xiàn)http在CORS跨域請(qǐng)求時(shí)首先發(fā)送OPTIONS探針請(qǐng)求返回http狀態(tài)碼200，此時(shí)后續(xù)的post登錄請(qǐng)求卻無(wú)法正常進(jìn)行，查看chrome的Console后發(fā)現(xiàn)異常錯(cuò)誤如下：
Failed to load http://localhost:9090/token/user/login:
Request header field X-XSRF-TOKEN is not allowed by Access-Control-Allow-Headers in preflight response.
3. 原因分析
在Chrome瀏覽器中，大部分情況下默認(rèn)Chrome Cookie保存在X-XSRF-TOKEN字段中，Chrome在發(fā)送OPTIONS探針請(qǐng)求時(shí)會(huì)自動(dòng)將Access-Control-Request-Headers: x-xsrf-token Http Header添加到OPTIONS請(qǐng)求中，而java后臺(tái)的HTTP CORS過(guò)濾器中尚未把 X-XSRF-TOKEN 添加到 Access-Control-Allow-Headers 中，因此后續(xù)的POST登錄請(qǐng)求被攔截而無(wú)法被處理。
4. 解決方法
(1) Angular 2.0 Client
在api.service.ts中的類ApiService中，將
Access-Control-Request-Headers: x-xsrf-token添加到Headers中，即修改setHeader()函數(shù)為：
private setHeader(): Headers {
let headersConfig = {
'Content-Type': 'application/json',
'Accept': 'application/json',
'Access-Control-Allow-Headers': 'Content-Type, X-XSRF-TOKEN'
};
if (this.jwtService.getToken()) {
headersConfig['Authorization'] = `Token ${this.jwtService.getToken()}`;
headersConfig['token'] = this.jwtService.getToken();
headersConfig['X-Auth-Token'] = this.jwtService.getToken();
}
return new Headers(headersConfig);
}
(2) Java Server:
在Access-Control-Allow-Headers中添加HeaderX-XSRF-TOKEN。
在spring-servlet.xml配置文件中添加以下代碼：
<mvc:cors>
<mvc:mapping path="/**"
allow-credentials="true"
allowed-headers="Content-Type, Accept, token, Authorization, X-Auth-Token, X-XSRF-TOKEN, X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,Access-Control-Allow-Headers"
allowed-methods="POST, GET, PUT, OPTIONS, DELETE"/>
</mvc:cors>
或者， 修改CORS攔截器CORSIntercepter【在spring-servlet.xml中配置攔截器】的代碼為：
public class CORSIntercepter extends HandlerInterceptorAdapter {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object o) throws Exception {
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with," +
"Content-Type,X-Amz-Date,Authorization,X-Api-Key," +
"X-Amz-Security-Token,X-XSRF-TOKEN,Access-Control-Allow-Headers");
return false;
}
}
又或者， 修改CORS過(guò)濾器CORSFilter【在web.xml中配置過(guò)濾器】的代碼為：
import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* Created by bob on 2017/2/5.
*/
public class CORSFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
System.out.println("Filtering on...........................................................");
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, token, Authorization, " +
"X-Auth-Token,X-XSRF-TOKEN,Access-Control-Allow-Headers");
chain.doFilter(req, res);
}
@Override
public void destroy() {
}
}
Bob
20171010
