經過nginx反向代理解決前端訪問的跨域問題

1、問題背景說明：
編寫移動前端頁面時須要訪問後臺系統接口。前端項目在本地（我的辦公電腦）開發，後臺接口存放後生產的後臺服務器，本地的ajax請求沒法直接訪問後臺接口，也就是遇到了跨域問題，如何在不改變後臺接口的狀況下解決跨域問題？

2、同源/跨域概念說明：
同源策略：是瀏覽器的一種安全策略，所謂同源是指域名、協議、端口徹底相同，只有同源的地址才能夠相互經過ajax的方式請求。
跨域：同源或不一樣源說的是兩個地址之間的關係，不一樣源地址之間的請求咱們稱之爲跨域請求。

3、nginx反向代理解決的原理：

將nginx安裝在本地，而後將項目部署於nginx下，這樣訪問本地項目時用http://localhost/本地項目 便可訪問。
而後配置nginx，經過反向代理的方式訪問後臺服務器，訪問後臺接口時使用http://localhost/後臺接口名稱 便可跳轉到後臺服務器。
這樣瀏覽器之間的ajax請求徹底知足瀏覽器域名、協議、端口相同的同源策略，可在不改變後臺接口的狀況下避免跨域問題。

4、安裝和配置nginx
過程主要參考瞭如下兩篇文章，對原理的描述很清晰、完善：
nginx解決跨域文章：https://www.cnblogs.com/renji...
nginx配置文章：http://www.cnblogs.com/renjin...

1）首先到nginx官網下載安裝包：http://nginx.org/en/download....
2）windows版本nginx使用方法簡要說明（cmd窗口下）：
幫助： nginx -h
啓動： start nginx
重載（nginx配置更新後可以使用）：nginx -s reload
中止： nginx -s stop 或者 nginx -s quit
3）nginx.conf 配置本地web項目訪問路徑和反向代理：

server {
        listen       80;              //nginx服務器啓動後的默認監聽端口，可按自身狀況修改
        server_name  localhost;        //nginx服務器的名稱，

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        
        //如下是本地項目的部署配置：配置web服務器的根目錄訪問地址
        location / {
            root   myApp/mobile;
            index  index.html index.htm;
        }
        
        //如下是反向代理訪問遠程的後臺接口的配置
        location /remote-interface/{
        //下面是反向代理配置，經過nginx服務器訪問本地/remote-interface時，會將請求轉到後臺實際服務器去處理
            proxy_pass  http://remote-address/remote-interface/ ; 
        }

以上就是nginx本地項目部署和反向代理的配置。配置完成後，便可在項目中使用ajax請求訪問後臺接口。

5、發送ajax請求試驗
本地項目中的ajax請求的代碼示例以下，重點注意ajax請求的URL，要與nginx.conf的配置對應上：

var reqData = {             //post請求參數
                    "xxx":xxx,
            }

            $.post("/remote-interface/interface-name", reqData, function (data, status) {
                // console.log(arguments);
                if (status != "success") {     //post請求響應爲失敗的處理
                    console.log(status);
                    return;
                }
            
            ///請求獲得響應數據後的處理操做可寫在這裏
               
            }, "json").error(function () {
                // console.log(arguments)
            });