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/地址發送請求，從而巧妙的解決了瀏覽器的跨域問題。
• 怎麼樣，是否是很簡單，快動手配置是試試吧(^_^)~