跨域概念

簡單來說：兩個url只要協議、域名、埠有任何一個不同，都被當作是不同的域，相互訪問就會有跨域問題。

案例

例如：在開發前後端完全分離的系統中，服務端程式碼屬於一個工程，前端程式碼屬於另一個工程，前端開發人員在進行介面對接時，可能會在webstorm等工具進行編碼，並用webstorm的內建伺服器進行除錯，這就會有跨域問題，因為，webstorm內建伺服器預設字首部分是http://localhost:63342/，而服務端介面的路徑字首部分一定不會是這樣，這樣便產生了跨域訪問的問題。

案例程式碼

 $(function(){
        $.ajax({
            url: "http://localhost:8888/ssm/interfaces/test/m006",
            type: "POST",
            async: false,
            dataType: "json",
            contentType: "application/json",
            cache: false,
            data: JSON.stringify({
                        "id": "bgdsdgs",
                        "name": "name",
                        "email": "
 
[email protected]",
                        "voModel2": [{
                            "id": "[email protected]",
                            "v3": {"id":"sdfghjkl"}
                        }]
                    }),
            success: function(data) {
                $("#text").html(JSON.stringify(data));
            },
            error: function(text) {
                $("text").html(JSON.stringify(text))
            }
        })
 

直接訪問，開啟瀏覽器的控制檯檢視，沒錯，提示的正是無法進行跨域訪問。

1、要解決這個問題很簡單，只要使頁面的字首和介面的字首一致就可以了，因此可以使用nginx進行反向代理。開啟nginx目錄下的conf資料夾，在nginx.conf檔案的配置如下

        #預設監聽80埠，ip後面不加埠號預設就是80
        listen       80;
        #伺服器地址
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        #專案根目錄，一般就是啟動頁
        location / {
            #專案所在目錄
            root   C:\Users\shengmengqi\WebstormProjects\angularJsFrame;
            #假設across-domain.html的首頁，如果之後頁面中跳轉也是基於http://localhost/跳轉
            index  across-domain.html;
        }
        #作用：訪問的http://localhost/ssm/interfaces/相當於一個代理url，實際訪問的
        是http://localhost:8888/ssm/interfaces/
        location /ssm/interfaces/{
            proxy_pass http://localhost:8888/ssm/interfaces/;
        }

2、配置完畢，將ajax中的介面路徑改為http://localhost/ssm/interfaces/test/m006，將ngnix啟動起來，在工作管理員中是否有nginx程序，有的話說明啟動成功，如果沒有，可以檢視nginx目錄下log資料夾中的error.log，看哪裡有問題進行修改，啟動成功後，在瀏覽器位址列直接訪問localhost，這次結果就正確了。

這次的請求其實是走了nginx代理伺服器的

總結

nginx的實際原理就是配置一個代理路徑替換實際的訪問路徑，使得瀏覽器認為訪問的資源都是屬於相同協議，域名和埠的，而實際訪問的並不是代理路徑，而是通過代理路徑找到實際路徑進行訪問，所以，不妨將nginx看作是給瀏覽器的一種障眼法好了，哈哈~