Vue和django的前后端分離項目，之前通過在django中允許跨域訪問實現了跨域請求，但為了使每個請求帶上session信息，我設置了withCredentials ,即：
axios.defaults.withCredentials = true然后跨域請求時會出現如下問題：
Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:8080' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
解決方案
-
Access-Control-Allow-Origin字段必須指定域名，不能為* -
Access-Control-Allow-Credentials為true
main.js中添加攔截器
Vue.http.interceptors.push((request, next) => {
request.credentials = true;
next();
});
2.CORS
同域安全策略CORS（Cross-Origin Resource Sharing）
它要求請求的服務器在響應的報頭（Response Header）添加 Access-Control-Allow-Origin標簽，從而允許此標簽所對應域訪問此服務器的資源，調用此服務器的接口。
缺陷：
- 默認情況下，跨源請求不提供憑據(cookie、HTTP認證及客戶端SSL證明等)，通過將withCredentials屬性設置為true，可以指定某個請求應該發送憑據。如果服務器接收帶憑據的請求，會用下面的HTTP頭部來響應：
Access-Control-Allow-Credentials: true- 1
如果發送的是帶憑據的請求，但服務器的相應中沒有包含這個頭部，那么瀏覽器就不會把相應交給JavaScript,請求就無法得到結果的數據（瀏覽器得到了，但是我們請求的方法得不到，因為被瀏覽器攔截了），因此在需要傳Cookie等時，服務端的Access-Control-Allow-Origin必須配置具體的具體的域名。並且還需要設置其他的請求頭：
-
Access -Control-Allow-Origin; //request.getHeader("Origin")||www.xxx.com
-
Access -Control-Allow-Methods; //POST, GET, OPTIONS, DELETE
-
Access-Control-Allow-Credentials;//是否支持cookie跨域
-
Access -Control-Allow-Headers;//x-requested-with,content-type
add_header Access-Control-Allow-Credentials true; add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";proxy_set_header
作用：允許重新定義或者添加發往后端服務器的請求頭。value可以包含文本、變量或者它們的組合。 當且僅當當前配置級別中沒有定義proxy_set_header指令時，會從上面的級別繼承配置。 默認情況下，只有兩個請求頭會被重新定義：
用法：
proxy_set_header Host $proxy_host;
proxy_set_header Connection close;
在實際應用中，我們可能需要獲取用戶的ip地址，比如做異地登陸的判斷，或者統計ip訪問次數等，通常情況下我們使用 request.getRemoteAddr()就可以獲取到客戶端ip，但是當我們使用了nginx作為反向代理后，使用request.getRemoteAddr()獲取到的就一直是nginx服務器的ip的地址，那這時應該怎么辦？
解決辦法： nginx是可以獲得用戶的真實ip的，也就是說nginx使用$remote_addr變量時獲得的是用戶的真實ip？
用法：proxy_set_header X-real-ip $remote_addr; #在界面中使用 request.getAttribute("X-real-ip")
part2：原理介紹
這里我們將nginx里的相關變量解釋一下，通常我們會看到有這樣一些配置
server {
listen 88;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location /{
root html;
index index.html index.htm;
proxy_pass http://backend;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-real-ip $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# proxy_set_header X-Forwarded-For $http_x_forwarded_for;
}
我們來一條條的看
1. proxy_set_header X-real-ip $remote_addr;
這句話之前已經解釋過，有了這句就可以在web服務器端獲得用戶的真實ip
但是，實際上要獲得用戶的真實ip，不是只有這一個方法，下面我們繼續看。
2. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
我們先看看這里有個X-Forwarded-For變量，這是一個squid開發的，用於識別通過HTTP代理或負載平衡器原始IP一個連接到Web服務器的客戶機地址的非rfc標准，如果有做X-Forwarded-For設置的話,每次經過proxy轉發都會有記錄,格式就是client1, proxy1, proxy2,以逗號隔開各個地址，由於他是非rfc標准，所以默認是沒有的，需要強制添加，在默認情況下經過proxy轉發的請求，在后端看來遠程地址都是proxy端的ip 。也就是說在默認情況下我們使用request.getAttribute("X-Forwarded-For")獲取不到用戶的ip，如果我們想要通過這個變量獲得用戶的ip，我們需要自己在nginx添加如下配置：
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
意思是增加一個$proxy_add_x_forwarded_for到X-Forwarded-For里去，注意是增加，而不是覆蓋，當然由於默認的X-Forwarded-For值是空的，所以我們總感覺X-Forwarded-For的值就等於$proxy_add_x_forwarded_for的值，實際上當你搭建兩台nginx在不同的ip上，並且都使用了這段配置，那你會發現在web服務器端通過request.getAttribute("X-Forwarded-For")獲得的將會是客戶端ip和第一台nginx的ip。
那么$proxy_add_x_forwarded_for又是什么？
$proxy_add_x_forwarded_for變量包含客戶端請求頭中的"X-Forwarded-For"，與$remote_addr兩部分，他們之間用逗號分開。
舉個例子，有一個web應用，在它之前通過了兩個nginx轉發，www.linuxidc.com 即用戶訪問該web通過兩台nginx。
在第一台nginx中,使用
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
現在的$proxy_add_x_forwarded_for變量的"X-Forwarded-For"部分是空的，所以只有$remote_addr，而$remote_addr的值是用戶的ip，於是賦值以后，X-Forwarded-For變量的值就是用戶的真實的ip地址了。
到了第二台nginx，使用
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
現在的$proxy_add_x_forwarded_for變量，X-Forwarded-For部分包含的是用戶的真實ip，$remote_addr部分的值是上一台nginx的ip地址，於是通過這個賦值以后現在的X-Forwarded-For的值就變成了“用戶的真實ip，第一台nginx的ip”，這樣就清楚了吧。
最后我們看到還有一個$http_x_forwarded_for變量，這個變量就是X-Forwarded-For，由於之前我們說了，默認的這個X-Forwarded-For是為空的，所以當我們直接使用proxy_set_header X-Forwarded-For $http_x_forwarded_for時會發現，web服務器端使用request.getAttribute("X-Forwarded-For")獲得的值是null。如果想要通過request.getAttribute("X-Forwarded-For")獲得用戶ip，就必須先使用proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;這樣就可以獲得用戶真實ip。
proxy_redirect [ default|off|redirect replacement ]
默認值：proxy_redirect default
使用字段：http, server, location
如果需要修改從被代理服務器傳來的應答頭中的"Location"和"Refresh"字段，可以用這個指令設置。
假設被代理服務器返回Location字段為： http://localhost:8000/two/some/uri/