同源：協(xié)議，域名，端口相同

同源

圖片.png

ajax為了獲取同源數(shù)據(jù)，不能獲取非同源數(shù)據(jù)。

跨域

方法：引入外部js,php文件

圖片.png

圖片.png

動態(tài)生產(chǎn)script標(biāo)簽：

圖片.png

圖片.png

圖片.png

圖片.png

1、JSONP跨域
jsonp的原理就是利用<script>標(biāo)簽沒有跨域限制，通過<script>標(biāo)簽src屬性，發(fā)送帶有callback參數(shù)的GET請求，服務(wù)端將接口返回數(shù)據(jù)拼湊到callback函數(shù)中，返回給瀏覽器，瀏覽器解析執(zhí)行，從而前端拿到callback函數(shù)返回的數(shù)據(jù)。
jsonp的缺點(diǎn)：只能發(fā)送get一種請求。

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

    // 傳參一個回調(diào)函數(shù)名給后端，方便后端返回時執(zhí)行這個在前端定義的回調(diào)函數(shù)
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
    document.head.appendChild(script);

    // 回調(diào)執(zhí)行函數(shù)
    function handleCallback(res) {
        alert(JSON.stringify(res));
    }
 </script>

服務(wù)端返回如下（返回時即執(zhí)行全局函數(shù)）：

handleCallback({"success": true, "user": "admin"})

2.jquery Ajax實(shí)現(xiàn)：

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

3.vue跨域
直接修改webpack.config.js配置。開發(fā)環(huán)境下，vue渲染服務(wù)和接口代理服務(wù)都是webpack-dev-server同一個，所以頁面與代理接口之間不再跨域。
webpack.config.js部分配置：

module.exports = {
    entry: {},
    module: {},
    ...
    devServer: {
        historyApiFallback: true,
        proxy: [{
            context: '/login',
            target: 'http://www.domain2.com:8080',  // 代理跨域目標(biāo)接口
            changeOrigin: true,
            secure: false,  // 當(dāng)代理某些https服務(wù)報錯時用
            cookieDomainRewrite: 'www.domain1.com'  // 可以為false，表示不修改
        }],
        noInfo: true
    }
}

5、document.domain + iframe跨域
此方案僅限主域相同，子域不同的跨域應(yīng)用場景。實(shí)現(xiàn)原理：兩個頁面都通過js強(qiáng)制設(shè)置document.domain為基礎(chǔ)主域，就實(shí)現(xiàn)了同域。

圖片.png

參考：9種常見的前端跨域解決方案（詳解）