將Token添加到請求頭Header中

概述

　　在使用JSON Web Token作為單點登錄的驗證媒介時，為保證安全性，建議將JWT的信息存放在HTTP的請求頭中，並使用https對請求鏈接進行加密傳輸，效果如下圖所示：

問題

１.由於項目是前后端分離的，不可避免的就產生了跨域問題，導致Authorization始終無法添加到請求頭中去，出現的請求如下圖所示：
　
　
原因：理論請看這篇文章：（點這里），簡單來說就是，當在進行跨域請求的時候，如圖自定義請求頭，如添加Authorization字段，那么HTTP請求會發出一個預檢請求，即OPTIONS請求，訪問服務器是否允許該請求，如果瀏覽器沒有進行跨域設置，則就會出現如上圖所示的錯誤。

解決辦法：瀏覽器設置跨域處理，這里介紹最簡單的方式
1.引用跨域處理的jar包

    <dependency>
        <groupId>com.thetransactioncompany</groupId>
        <artifactId>cors-filter</artifactId>
    </dependency>
   
   
   
           

2.在Web.xml中添加如下配置：
注意要在下圖的位置添加上自定義的請求頭字段：Authorization

 <filter>
        <filter-name>CORS</filter-name>
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
        <init-param>
            <param-name>cors.allowOrigin</param-name>
            <param-value>*</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportedMethods</param-name>
            <param-value>GET, POST, HEAD, PUT, DELETE</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportedHeaders</param-name>
            <param-value>Authorization,Accept, Origin,X-Requested-With, Content-Type, Last-Modified</param-value>
        </init-param>
        <init-param>
            <param-name>cors.exposedHeaders</param-name>
            <param-value>Set-Cookie</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportsCredentials</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CORS</filter-name>
        <url-pattern>/*</url-pattern> </filter-mapping>
   
   
   
           

這樣瀏覽器請求的時候就會成功響應預檢請求了，如下圖：

應用

Ajax添加Token到Header中的方法

1.方法一：

$.ajax({ type: "GET", url: "/access/logout/" + userCode, headers: {'Authorization': token}
});
   
   
   
           

2.方法二：

    $.ajax({
        type: "GET",
        url: "/access/logout/" + userCode,
        beforeSend: function(request) {
            request.setRequestHeader("Authorization", token);
        },
        success: function(result) {
        }
    });
   
   
   
           

Anjular添加Token到Header中的方法

1.自定義Http方法，全局使用自動添加Token到Header中，或者使用攔截器，方法類似。

import {Observable} from 'rxjs/Observable';
import {Injectable} from '@angular/core';
import {
  Http,
  RequestOptionsArgs,
  RequestOptions,
  Response,
  Headers
} from '@angular/http';

const mergeToken = (options: RequestOptionsArgs = {}) => {
  const newOptions = new RequestOptions({}).merge(options);
  const newHeaders = new Headers(newOptions.headers);
  const jwt = localStorage.getItem('jwt');
  if (jwt) {
    newHeaders.set('Authorization', jwt);
  }
  newOptions.headers = newHeaders;
  return newOptions;
};

@Injectable()
export class MyHttp {

  constructor(private http: Http) { 
  }

  get(url: string, options?: RequestOptionsArgs): Observable<Response> { 
    return this.http.get(url, mergeToken(options));
  }

  post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
    return this.http.post(url, body, mergeToken(options));
  }

  put(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
    return this.http.put(url, body, mergeToken(options));
  }

  delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
    return this.http.delete(url, mergeToken(options));
  }

  patch(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
    return this.http.patch(url, body, mergeToken(options));
  }

  head(url: string, options?: RequestOptionsArgs): Observable<Response> {
    return this.http.head(url, mergeToken(options));
  }

}
   
   
   
           

2.參考這個鏈接的方法，沒有測試過，需要測試。

http://blog.csdn.net/magiclr/article/details/49643277

總結：有時候問題不是不能解決，而是需要多了解知識，從多個角度來思考問題，這也是這個問題困擾了好長時間的原因。

原文：https://blog.csdn.net/why15732625998/article/details/79348718