nginx 代理

最近用vue-element-admin后台管理系統重構項目，用nginx做反向代理解決跨域問題並實現單點登陸，與后端同事研究了三天才完成，主要是對nginx配置項不怎么理解，現在工作完成做個記錄

1. 准備工作：啟動前端服務器，啟動nginx,啟動本地后端代碼服務器

2. 瀏覽器訪問域名 usertag-local.vmic.xyz，會通過nginx代轉發到 http://localhost:8090，但地址欄仍然會顯示域名而不是具體的ip，會進入前端首頁面，

首頁路由盡量用index表示，首頁掛載函數mouted()時請求獲取用戶信息接口，該接口的完整url是 http://usertag-local.vmic.xyz/api/get/user,會通過nginx進行轉發到 

http://localhost:82請求數據，每次的請求都會優先通過SSO去檢查是否含有token,若沒有則返回未登陸信息和重定向地址，該地址會在單點登陸地址的后面追加前端項目地址，

前端根據返回的信息進行判斷並重定向到單點登錄頁面進行用戶信息登陸，點擊登陸成功之后SSO會重定向到前端項目地址並在URL上追加用戶token，頁面掛載時會從url上

獲取token存到cookie中，並再次請求用戶信息接口在信息頭Cookie中會攜帶token和seesionID（登陸成功之后由SSO寫入cookie），在經過SSO檢查時用前端傳入的token

和用戶ip去查詢用戶信息若查到則登陸成功返回用戶信息，若沒有則返回未登陸信息和重定向地址。

 

 1. 這里是nginx配置

server {
        listen       80;  // nginx默認監聽80端口
        server_name  usertag-local.vmic.xyz;     # 這個是訪問我本地前端項目配置的域名可隨便寫，需要在計算機的host文件中指定域名映射的端口127.0.0.1  usertag-local.vmic.xyz
       
　　　　 location / {
            proxy_pass   http://localhost:8090;    #這個配置用域名訪問項目時會跳轉到本地前端代碼，與前端vue.config.js文件中的端口一致，也就是訪問前端代碼的地址
        }
        
        location /api{
            rewrite  ^/api/(.*)$ /$1 break;
            proxy_set_header Host $http_host;       #設置nginx的host，很重要，這個設置是將登陸之后后端獲取要跳轉的項目地址為當前項目域名
            #proxy_set_header X-Forward-For $remote_addr;        #設置客戶端ip
            #proxy_set_header X-Real-IP 127.0.0.1;         # 設置真實ip，后端獲取需要
            proxy_pass   http://localhost:82;           #所有/api開頭的請求都會轉發到這個地址，這是我本地后端代碼地址，服務器端口是82
        }

 

2.前端統一配置請求主機名

module.exports = {

  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port: 8090,
    open: true,
    host: 'usertag-local.vmic.xyz',   // 統一配置所有請求的主機名，這樣在發axios請求時的url就只需要寫接口名，
    overlay: {
      warnings: false,
      errors: true
    }
發送axios請求時將withCredentials=true,會自動將cookie中的信息攜帶到請求頭cookie中