將Token添加到請求頭Header中

概述

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

問題

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

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

    <dependency>
        <groupId>com.thetransactioncompany</groupId>
        <artifactId>cors-filter</artifactId>
    </dependency>
1
2
3
4
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
這樣瀏覽器請求的時候就會成功響應預檢請求了，以下圖： 

應用

Ajax添加Token到Header中的方法

1.方法一：

$.ajax({
    type: "GET",
    url: "/access/logout/" + userCode,
    headers: {'Authorization': token}
});
1
2
3
4
5
2.方法二：

    $.ajax({
        type: "GET",
        url: "/access/logout/" + userCode,
        beforeSend: function(request) {
            request.setRequestHeader("Authorization", token);
        },
        success: function(result) {
        }
    });
1
2
3
4
5
6
7
8
9
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));
  }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2.參考這個連接的方法，沒有測試過，須要測試。

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

總結：有時候問題不是不能解決，而是須要多瞭解知識，從多個角度來思考問題，這也是這個問題困擾了好長時間的緣由。 ---------------------  做者：王洪玉  來源：CSDN  原文：https://blog.csdn.net/why15732625998/article/details/79348718?utm_source=copy  版權聲明：本文爲博主原創文章，轉載請附上博文連接！