vue開發之跨域請求，請求頭not allowed by Access-Control-Allow-Headers，后端cookie session值取不到（二）

原因：你本地的請求ajax的get和post請求；如果你的請求頭內放一些可用驗證數據Token的時候就會存在跨域請求這是瀏覽器所不允許的問題；

方案一：后台的接口請求模式都寫成jsonp請求，前端去調用；

           特點：是一種非正式傳輸協議，該協議的一個要點就是允許用戶傳遞一個callback 或者開始就定義一個回調方法，參數給服務端，然后服務端返回數據時會將這個callback 參數作為函數名來包裹住 JSON  數據，這樣客戶端就可以隨意定制自己的函數來自動處理返回數據了。

           缺點：它只支持GET請求而不支持POST等其它類型的HTTP請求；它只支持跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進行JavaScript調用的問題，數據傳輸和服務器安全問題都不能得到保障。

第一種方案我就不解釋和運用了缺點太多！

方案二：使用nginx服務重定向請求，實現偽同域請求；

      1、mac下載nginx（我只講mac電腦的nginx安裝，window可以去官網）；

      2、安裝Command Line tools

  xcode-select --install

      3、安裝brew命令

  ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

       4、安裝nginx

  brew install nginx

       5、啟動nginx   

  sudo nginx

拓展命令：

關閉nginx方法
1、sudo nginx -s stop
 2、先查詢占用的進程號：  ps -ef|grep nginx 終端輸出：  501 15800 1 0 12:17上午 ?? 0:00.00 nginx: master process /usr/local/Cellar/nginx/1.8.0/bin/nginx -c /usr/local/etc/nginx/nginx.conf 501 15801 15800 0 12:17上午 ?? 0:00.00 nginx: worker process 501 15848 15716 0 12:21上午 ttys000 0:00.00 grep nginx
 占用進程號為：15800(記住第一行第二個數字為進程號，回頭再解析)，然后輸入：  kill -QUIT 15800 (從容的停止，即不會立刻停止)  Kill -TERM 15800 （立刻停止）  Kill -INT 15800 （和上面一樣，也是立刻停止）

3、實在不知道打開：launchpad->其他->活動監視器->cup搜索nginx->手動結束nginx進程；

打開配置nginx的文件：

  open /usr/local/etc/nginx

      6、打開nginx配置文件,配置nginx.conf文件；

  open /usr/local/etc/nginx 

      

代碼解釋區域：

代碼copy區域：

server {
        listen       8089; 
        server_name  localhost;

    location / {
            proxy_pass   http://192.168.0.112:8080;       # 前端靜態頁面地址
            proxy_redirect default;
            #設置主機頭和客戶端真實地址，以便服務器獲取客戶端真實IP
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;                
        }

        #location  /hr/api/ {
    #rewrite  ^/(.*)$ /$1 break; 
        #proxy_pass   http://192.168.0.119:8080; 
        #proxy_set_header Host $host;
        #    proxy_set_header X-Real-IP $remote_addr;
        #    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;   
        #    client_max_body_size 20M;  
        #}

        location  /edu {
    rewrite  ^/(.*)$ /$1 break; 
        proxy_pass   http://192.168.0.119:8081; 
        proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;   
            client_max_body_size 20M;  
        }
    }

      7、配置vue代碼以及請求；

然后

npm run dev 或者yarn dev運行前端vue代碼

然后網頁訪問就正常了！

切記：每次更改完nginx的配置文件nginx.conf都要去重新啟動nginx；可以先殺死然后去看看進程號里邊有沒有服務了，然后重啟，也可以直接重啟。檢查進程號的nginx服務避免進程中出現多個nginx服務。

原理nginx使用的重定向解決了請求的跨域問題，前端頁面進入nginx服務然后重定向為后台接口的同域的請求地址；