準備nginx

• 下載nginx

去nginx官網下載最新版nginx.目前(2017年11月13日)最新版是1.13.6.本文以windows為例.

• 執行nginx

下載完成解壓到某目錄.如我解壓到D盤根目錄
進入nginx-1.13.6目錄,雙擊nginx.exe啟動nginx,啟動介面會一閃而過
使用瀏覽器訪問http://localhost/,看到歡迎節目就說明啟動ok啦

注:nginx預設啟動的是80埠,而http訪問不加埠,訪問的就是80埠,https不加埠訪問的是443埠.所以我們訪問http://localhost/其實訪問的是http://localhost:80/只不過剛好可以省略80埠.如果修改了nginx啟動埠不是80,那訪問就肯定需要加上埠訪問.

• 停止nginx

nginx啟動成功會建立兩個程式,我們殺掉這兩個程式就停止nginx了
進入工作管理員程式tab頁,右鍵nginx程式,選擇結束程式即可

也可以在nginx目錄下,新建一個.bat檔案.裡面內容是nginx -s stop.雙擊這個.bat檔案,也可以停止nginx.

注:有時候雙擊.bat檔案也不能停止nginx,最好檢查程式中是否還存在nginx程式.如果存在再雙擊一次.

準備應用服務

• 首先先保證app和後臺服務已經啟動
• 如下圖,我的app啟動在http://88.128.18.144:8100/,後臺api服務啟動在http://88.128.18.144:8081/api/.兩個ip地址埠不一樣,肯定存在跨域問題

app已經啟動

後臺已經啟動

注:88.128.18.144就是我本地ip,也可以用localhost訪問.我這裡演示統一用ip

使用nginx解決跨域方式1

• 使用文字編輯器開啟nginx.conf檔案,這是nginx的配置檔案

• 配置nginx.conf解決跨域,如下圖是我新加的配置
  
  

location /app/ {
  proxy_pass http://88.128.18.144:8100/;
}
        
location /api/ {
  proxy_pass http://88.128.18.144:8081/api/;
}

• 啟動nginx(沒有停止的先停止)

• 由於我們的配置還是在80埠下,現在訪問不加埠,或者說現在訪問都是80埠.如下圖.此時ip和埠一致了.所以就不存在跨域問題啦.

  
  
  
  
  
  

• 最後記得修改app的請求地址.新地址沒有埠了.現在app和後臺服務同ip同埠,nginx幫我們代理到原來的地址

注:現在也沒有options請求了

使用nginx解決跨域方式2

• 配置nginx，給api新增允許跨域請求頭資訊，“欺騙”瀏覽器服務端是允許跨域的，相比方式1這種方式更常用
  
  

        location /api {
            proxy_pass   http://88.128.19.209:8081/api/;
            add_header Access-Control-Allow-Methods *;
            add_header Access-Control-Max-Age 3600;
            add_header Access-Control-Allow-Credentials true;
            add_header Access-Control-Allow-Origin $http_origin;
            add_header Access-Control-Allow-Headers $http_access_control_request_headers;

            if ($request_method = OPTIONS ) {
                return 200;
            }
        }

其他

• 跨域等許多nginx配置可能比較常用，可以把其放入單獨檔案中，然後include，這樣其他api都可以include這個公共配置
  
  
  
  
  

最後

• 其他解決跨域的方法可以看這裡

• nginx是很強大的,在實際專案使用中還有很複雜的配置規則和方式.如下圖,各位想要深入請自行學習.可以百度"nginx配置檔案詳解"

  
  
  

  image.png

• nginx中文文件