前端跨域問題的解決

轉載自https://segmentfault.com/a/1190000011145364

常見的跨域問題

URL                                      說明                    是否允許通信
http://www.domain.com/a.js
http://www.domain.com/b.js         同一域名，不同文件或路徑           允許
http://www.domain.com/lab/c.js

http://www.domain.com:8000/a.js
http://www.domain.com/b.js         同一域名，不同端口                不允許
 
http://www.domain.com/a.js
https://www.domain.com/b.js        同一域名，不同協議                不允許
 
http://www.domain.com/a.js
http://192.168.4.12/b.js           域名和域名對應相同ip              不允許
 
http://www.domain.com/a.js
http://x.domain.com/b.js           主域相同，子域不同                不允許
http://domain.com/c.js
 
http://www.domain1.com/a.js
http://www.domain2.com/b.js        不同域名                         不允許

跨域解決方案

1、 通過jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域資源共享（CORS）
7、 nginx代理跨域
8、 nodejs中間件代理跨域
9、 WebSocket協議跨域

這是根據網絡上前輩整理的幾種方法，我遇到的跨域問題有：

1、頁面需要內嵌不同域名的頁面，使用了iframe嵌套得到了實現，但是這樣也有弊端那就是頁面中的元素不可操作

2、不同端口的接口的請求

3、不同域名的接口請求

一、對於不同域名的接口的請求，jsoup的方法如下，缺點是隻能實現get一種請求，服務端也需要配置：

<script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 傳參並指定回調執行函數爲onBack
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
    document.head.appendChild(script);

    // 回調執行函數
    function onBack(res) {
        alert(JSON.stringify(res));
    }
 </script>

$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 請求方式爲jsonp
    jsonpCallback: "onBack",    // 自定義回調函數名
    data: {}
});