跨域問題產生的原因和解決方法

一. 產生的原因

1. 什么是跨域

跨域是指A網頁想要獲取B網頁的資源，如果A、B頁面的協議、域名、端口號、子域名不同，所進行的訪問都是跨域的，而瀏覽器一抖為了安全都限制了跨域訪問。

跨域是指瀏覽器不執行其他頁面腳本，是由於同源策略造成的，是對Javascript的一種安全限制

2. 什么是同源策略

同源是指協議、域名、端口都保持一致

http://www.baidu.com:8080/index.html （http協議，www.baidu.com 域名、8080 端口 ，只要這三個有一項不一樣的都是跨域，這里不一一舉例子）

http://www.baidu.com:8080/matsh.html（不跨域）

http://www.baidu.com:8081/matsh.html（端口不一樣，跨域）

注意：localhost 和127.0.0.1 雖然都指向本機，但也屬於跨域

二. 解決方案

1. JSONP

• JSONP是一個非官方協議，它允許在服務器集成script tags返回客戶端，通過javascript callback的形式實現跨域訪問
• 基本思想：網頁通過添加一個<script>元素，向服務器請求JSON數據，這種做法不受同源策略限制；服務器收到請求后，將數據放在一個指定名字的回調函數里穿回來。

    <script type="text/javascript">
        function jsonpCallback(result){
            //alert(result);
            for(var i in result){
                alert(i + ":" + result[i]);     //循環輸出
            }
        }
        var JSONP = document.createElement("script");
        JSONP.type = "text/javascript";
        JSONP.src = "http://crossdomain.com/services.php?callback=jsonpCallback";
        document.getElementsByTagName("head")[0].appendChild(JSONP);
    </script>

• 缺點：get請求，前后端都要修改

2. 修改配置實現Chrome跨域訪問

右鍵chrome.exe，選擇屬性，選擇快捷方式，在目標輸入框加上 --disable-web-security --user-data-dir=D:\chromeCache ，注意需要增加一個空格。