Nginx入門及如何反向代理解決生產環境跨域問題

緣氏集團技術員發表於2018-05-20
Nginx跨域

1.Nginx入門與基本操作篇

注：由於伺服器是windows系統，所以本文主要講解Nginx在windows下的操作。

  • 首先下載Nginx
  • 解壓縮，我們所有的配置基本都在萬能的 nginx/conf/nginx.conf 中完成，其它檔案可以不用理
  • 關於nginx.conf
...
#需要我們按需要修改的一般只有中間server裡的程式碼
    server {
        # 設定監聽埠
        listen       9000;
        server_name  localhost;
        # 設定靜態資源路徑，如下設定打輸入地址時會開啟H盤app/dist下的index頁面
        location / {
            root   H:/app/dist;
            index  index.html;
        }
        # 報錯頁面，同上根據需要設定，也可不理
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
...
複製程式碼
  • 這樣一個簡單服務的配置就完成了，啟動服務訪問 http://localhost:9000 即可開啟對應網頁，如果需要啟動多個服務，只需多新增server配置後重啟即可。
  • 幾個常用的操作指令(以下指令請在nginx檔案目錄下使用)
# 啟動nginx(我的情況是執行起來後cmd就輸入不了其它指令了，需要在開啟一個cmd來操作)
    nginx.exe
# 修改nginx.conf檔案後重啟nginx
    nginx.exe -s reload
# 暫停nginx服務
    nginx.exe -s stop
# 有時暫停服務失效，需要強制終止nginx程式 注：/f 強制執行
    taskkill /im nginx.exe /f
複製程式碼

2.反向代理解決跨域問題

通常開發環境可以通過設定proxy解決跨域問題，而生產環境下要麼把前端專案放在後端專案裡，要麼設定cor解決跨域問題，前者不利於前後端分離，後者需要後端配置，而現在使用nginx做啟動服務設定反向代理可以很好解決跨域問題。

  • 還是回到萬能的nginx.conf檔案，新增location匹配規則實現代理轉發
    server {
        listen       9000;
        server_name  localhost;
		
        location / {
            root   H:/app/dist;
            index  index.html;
        }
        #設定代理轉發
        location /api/ {
          proxy_pass   http://localhost:9600/;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
複製程式碼
  • 通過上面的設定，在重啟服務，可以讓頁面中所有包含 /api/ 欄位的請求都轉為由伺服器去向http://localhost:9600/地址傳送請求，從而巧妙的解決了瀏覽器的跨域問題。
  • 怎麼樣，是不是很簡單，快動手配置是試試吧(^_^)~

相關文章