【angular 2踩過的坑】Angular2 : X-XSRF-TOKEN is not allowed by Access-Control-Allow-Headers

1. 問題背景


在開發(fā)一個請假銷假管理系統(tǒng)時满钟,我采用前后端分離的技術(shù)方案廓奕,具體如下圖所示:

技術(shù)方案

其中,后臺登錄的Rest API為http://localhost:9090/token/user/login.
前端angular 2中利用Http請求Rest API的get/post/put/delete封裝在api.service.ts中,具體代碼如下:

export class ApiService {
  private expiredTime: number = 30 * 60 * 1000; // token時間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()是用來設(shè)置請求頭的方法。

2. 問題描述


在開發(fā)環(huán)境下運行angular 2工程時并沒有出現(xiàn)任何錯誤添谊。但是部署在生產(chǎn)環(huán)境下時,經(jīng)常出現(xiàn)首次登錄成功后察迟,過段時間token過期時重新登錄斩狱,會發(fā)現(xiàn)http在CORS跨域請求時首先發(fā)送OPTIONS探針請求返回http狀態(tài)碼200,此時后續(xù)的post登錄請求卻無法正常進行扎瓶,查看chrome的Console后發(fā)現(xiàn)異常錯誤如下:

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瀏覽器中所踊,大部分情況下默認Chrome Cookie保存在X-XSRF-TOKEN字段中,Chrome在發(fā)送OPTIONS探針請求時會自動將Access-Control-Request-Headers: x-xsrf-token Http Header添加到OPTIONS請求中概荷,而java后臺的HTTP CORS過濾器中尚未把 X-XSRF-TOKEN 添加到 Access-Control-Allow-Headers秕岛,因此后續(xù)的POST登錄請求被攔截而無法被處理。

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過濾器CORSFilter【在web.xml中配置過濾器】的代碼為:

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市改鲫,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌林束,老刑警劉巖像棘,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異壶冒,居然都是意外死亡缕题,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門胖腾,熙熙樓的掌柜王于貴愁眉苦臉地迎上來烟零,“玉大人,你說我怎么就攤上這事咸作∠前ⅲ” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵记罚,是天一觀的道長墅诡。 經(jīng)常有香客問我,道長桐智,這世上最難降的妖魔是什么末早? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任烟馅,我火速辦了婚禮,結(jié)果婚禮上然磷,老公的妹妹穿的比我還像新娘郑趁。我一直安慰自己,他們只是感情好姿搜,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布寡润。 她就那樣靜靜地躺著,像睡著了一般痪欲。 火紅的嫁衣襯著肌膚如雪悦穿。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天业踢,我揣著相機與錄音栗柒,去河邊找鬼。 笑死知举,一個胖子當著我的面吹牛瞬沦,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播雇锡,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼逛钻,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了锰提?” 一聲冷哼從身側(cè)響起曙痘,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎立肘,沒想到半個月后边坤,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡谅年,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年茧痒,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片融蹂。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡旺订,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出超燃,到底是詐尸還是另有隱情区拳,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布意乓,位于F島的核電站劳闹,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜本涕,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一业汰、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧菩颖,春花似錦样漆、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至呻右,卻和暖如春跪妥,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背声滥。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工眉撵, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人落塑。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓纽疟,卻偏偏與公主長得像,于是被迫代替她去往敵國和親憾赁。 傳聞我的和親對象是個殘疾皇子污朽,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現(xiàn)龙考,斷路器蟆肆,智...
    卡卡羅2017閱讀 134,716評論 18 139
  • 引用自HTTP訪問控制(CORS) 當 Web 資源請求由其它域名或端口提供的資源時,會發(fā)起跨域 HTTP 請求(...
    有涯逐無涯閱讀 2,592評論 0 4
  • 轉(zhuǎn)載于阮一峰老師的跨域資源共享 CORS 詳解 CORS是一個W3C標準晦款,全稱是"跨域資源共享"(Cross-or...
    俊_杰閱讀 445評論 0 3
  • Section1炎功、為什么要跨域? 自古以來(1995年起)柬赐,為了用戶的信息安全,瀏覽器就引入了同源策略官紫。那么同源策...
    不去解釋閱讀 556評論 0 0
  • 本文詳細介紹了 XMLHttpRequest 相關(guān)知識肛宋,涉及內(nèi)容: AJAX、XMLHTTP束世、XMLHttpReq...
    semlinker閱讀 13,675評論 2 18