前端必會的nginx代理配置，跨域不再用求後端小鍋鍋了~~

 No1. nginx下載和安裝：http://nginx.org/en/download.html 選擇相應版本下載，下載好後，解壓安裝包，一路可視化界面操做，通常選擇是，balabala,結束。

No2. nginx運行，找到nginx.exe 雙擊，固然還要命令操做，nginx start ...詳細見官方api

No3. 配置 conf/nginx.conf (就前端而言，須要代理接口，文件用本地)

作個假設：本地文件路徑（C:/Users/admin/Desktop/webProject）接口請求(http://www.test.com/api)

一、配置本地代碼的代理相關代碼：

location ^~ / {          
    root C:/Users/admin/Desktop/webProject;
}複製代碼

二、配置接口跨域代理相關代碼：

location ^~ /apis {          
     rewrite ^.+apis/?(.*)$ /$1 break;       # rewrite是重寫，正則匹配到apis開始，$1表明括號裏匹配到的路徑，重寫成括號裏匹配到的路徑； 
     add_header Access-Control-Allow-Origin *;          
     proxy_pass http://www.test.com/api;        
}複製代碼

No4. 啓動服務。雙擊nginx.exe,每次配置修改都須要重啓服務。瀏覽器地址欄裏輸入localhost:80或127.0.0.1:80或本機ip:80 便可訪問C:/Users/admin/Desktop/webProject目錄，可是需手動輸入該文件夾下的index.html或者xxx.html,看到你寫的頁面，說明配置本地代碼的服務已成功，若是一切接口請求正常，說明配置接口服務成功。

No5. 注意點

1.代碼中ajax請求路徑 /apis/xxx/yyy,實現代理的接口http://www.test.com/api/xxx/yyy

2.nginx默認端口是80，確保端口不被佔用。

3.有疑惑信息，能夠看日誌logs/ 下的文件

No6. 缺點 須要在前端代碼請求路徑裏多添加層/apis 或者本身定義的，不過寫個baseUrl,分線上線下也就如下子解決了。

No7. 所有配置（可直接使用，替換nginx.conf）

    #user nobody;

worker_processes 1;

#error_log logs/error.log;

#error_log logs/error.log notice;

#error_log logs/error.log info;

#pid logs/nginx.pid;

# taskkill /F /IM nginx.exe /T

events {

worker_connections 1024;

}

http {

#include ../v_hostconf/*.conf;

include mime.types;

default_type application/octet-stream;

access_log off;

sendfile on;

#tcp_nopush on;

#keepalive_timeout 0;

keepalive_timeout 65;

server_names_hash_bucket_size 64;

#gzip on;

server {

             listen 80;

             add_header Access-Control-Allow-Origin *;

             add_header Access-Control-Allow-Headers X-Requested-With;

            add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

            location ^~ /apis {

                rewrite ^.+apis/?(.*)$ /$1 break;

                add_header Access-Control-Allow-Origin *;

                proxy_pass http://www.test.com/api;

            }

           location ^~ / {

              root C:/Users/admin/Desktop/webProjectn;

           }

       }

}