場景
在H5開發中，有時候有些問題只在線上環境出現，線上環境又不能隨便更改代碼和配置，比如，我們需要對頁面進行重定向，正則匹配轉發，那麼我們能不能在本地調試就能模擬線上環境頁面訪問情況呢？
答案是肯定的！那麼如何做呢？
模擬線上環境頁面訪問
1、nginx
線上環境使用的是nginx服務器。
Nginx是一個高性能的HTTP和反向代理服務器，也是一個IMAP/POP3/SMTP服務器。它也是一種輕量級的Web服務器，可以作爲獨立的服務器部署網站（類似Tomcat）。它高性能和低消耗內存的結構受到很多大公司青睞，如淘寶網站架設。
2、安裝和部署
（1）下載鏈接 -> http://nginx.org/en/download.html , 建議選擇穩定版
（2）解壓後啓動。
啓動方式有兩種：雙擊nginx.exe，或者 命令行啓動。
因爲調試過程中需要多次關閉和重啓nginx，如果通過nginx雙擊的方式，可能會造成舊的nginx未關閉，新打開了一個nginx進程（可以打開任務管理器查看），這樣會調試結果不準確。因此建議使用命令行。
啓動方式：
打開解壓文件夾路徑，按住shift鍵，右鍵，選擇 “在此處打開命令窗口” 即可快捷打開cmd窗口。
輸入命令啓動nginix：
start nginx
瀏覽器打開 http://localhost:80 ，見到welcome to nginx，即啓動成功
也可以cmd輸入
tasklist /fi "imagename eq nginx.exe"
如下圖所示即啓動成功
3、修改nginx配置
nginx安裝啓動完畢，我們還需要修改一下配置，這樣才能當我們訪問線上環境域名時，能指向我們本地的項目文件。
打開nginx文件夾下conf目錄的nginx.conf文件進行編輯
server {
listen 80;
server_name 線上環境域名，例如xdh.com;
location / {
root 本地項目文件地址，例如D:/front/code/xdh，注意這裏用的是右斜槓;
index index.html index.htm;
autoindex on;
}
}
保存，關閉
4、修改host文件
windows系統，打開host文件，地址：C:\Windows\System32\drivers\etc
編輯host文件，添加一個上面nginx配置的線上環境域名
127.0.0.1 xdh.com
5、重啓nginx
cmd窗口執行：
//nginx測試是否正常
nginx -t
//重啓nginx
nginx -s reload
6、瀏覽器輸入線上環境訪問地址，這時訪問線上環境地址，實際上訪問的就是我們本地項目文件啦！
7、想要模擬線上環境的重定向、轉發操作，這時只需要配置上面的nginx.conf就好了。
nginx常規配置
重定向rewrite
server {
listen 80;
server_name localhost;
#301永久重定向
rewrite ^/static/a.html$ /static/b.html permanent;
#302臨時重定向
rewrite ^/static/a.html$ /static/b.html redirect;
location / {
root D:/front/code/xdh;
index index.html index.htm;
autoindex on;
}
}
location匹配規則
優先級：
(localtion =) > (localtion完整url) > (localtion ^~) > (localtion ~,~*) > (lcoaltion部分起始路徑) > (/)
說明：
-
= 表示精確匹配
-
^~ 表示指定的路徑開頭
-
~ 表示區分大小寫的正則匹配
-
~* 表示不區分大小寫的正則匹配
-
/ 通用匹配,所有的URL都是以此爲開頭
例子：
location ^~ /static/ {
#規則1
}
location ~ \.(gif|jpg|png|js|css)$ {
#規則2
}
location ~* \.png$ {
#規則2
}
//http://xdh.com/static/a.png 優先匹配到規則1，則不匹配後面的規則
//http://xdh.com/a.png 匹配到規則2
location配置項
location / {
root html;
index index.html index.htm;
#轉發後端地址，一般用於做軟負載，輪詢後端服務器
#proxy_pass http://localhost:8080;
#拒絕請求，返回403，一般用於某些目錄禁止訪問
#deny all;
#允許請求
#allow all;
#請求頭設置
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
#重新定義或者添加發往後端服務器的請求頭
#給請求頭中添加客戶請求主機名
proxy_set_header Host $host;
#給請求頭中添加客戶端IP
proxy_set_header X-Real-IP $remote_addr;
#將$remote_addr變量值添加在客戶端“X-Forwarded-For”請求頭的後面，並以逗號分隔。 如果客戶端請求未攜帶“X-Forwarded-For”請求頭，$proxy_add_x_forwarded_for變量值將與$remote_addr變量相同
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#給請求頭中添加客戶端的Cookie
proxy_set_header Cookie $http_cookie;
#將使用代理服務器的主域名和端口號來替換。如果端口是80，可以不加。
proxy_redirect off;
#瀏覽器對 Cookie 有很多限制，如果 Cookie 的 Domain 部分與當前頁面的 Domain 不匹配就無法寫入。
#所以如果請求 A 域名，服務器 proxy_pass 到 B 域名，然後 B 服務器輸出 Domian=B 的 Cookie，
#前端的頁面依然停留在 A 域名上，於是瀏覽器就無法將 Cookie 寫入。
#不僅是域名，瀏覽器對 Path 也有限制。我們經常會 proxy_pass 到目標服務器的某個 Path 下，
#不把這個 Path 暴露給瀏覽器。這時候如果目標服務器的 Cookie 寫死了 Path 也會出現 Cookie 無法寫入的問題。
#設置“Set-Cookie”響應頭中的domain屬性的替換文本，其值可以爲一個字符串、正則表達式的模式或一個引用的變量
#轉發後端服務器如果需要Cookie則需要將cookie domain也進行轉換，否則前端域名與後端域名不一致cookie就會無法存取
#配置規則：proxy_cookie_domain serverDomain(後端服務器域) nginxDomain(nginx服務器域)
proxy_cookie_domain localhost .testcaigou800.com;
#取消當前配置級別的所有proxy_cookie_domain指令
#proxy_cookie_domain off;
#與後端服務器建立連接的超時時間。一般不可能大於75秒；
proxy_connect_timeout 30;
}