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

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

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

           特色：是一種非正式傳輸協議，該協議的一個要點就是容許用戶傳遞一個callback 或者開始就定義一個回調方法，參數給服務端，而後服務端返回數據時會將這個callback 參數做爲函數名來包裹住 JSON  數據，這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了。

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

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

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

      一、mac下載nginx（我只講mac電腦的nginx安裝，window能夠去官網）；

      二、安裝Command Line tools

  xcode-select --install

      三、安裝brew命令

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

       四、安裝nginx

  brew install nginx

       五、啓動nginx   

  sudo nginx

拓展命令：

關閉nginx方法
一、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 （和上面同樣，也是馬上中止）

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

打開配置nginx的文件：

  open /usr/local/etc/nginx

      六、打開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;  
        }
    }

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

而後

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

而後網頁訪問就正常了！

切記：每次更改完nginx的配置文件nginx.conf都要去從新啓動nginx；能夠先殺死而後去看看進程號裏邊有沒有服務了，而後重啓，也能夠直接重啓。檢查進程號的nginx服務避免進程中出現多個nginx服務。

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