在網站後臺跨域訪問另一伺服器時，若被訪問伺服器未設定response[‘Access-Control-Allow-Origin’] = ‘*’ 那麼將無法獲取。

jsonp方法

偽造ajax提交請求

請求端

 // 基於jsonp
    // 原理： ajax 不能直接跨域 。 
    //向html中加入script標籤 含有訪問路徑，script標籤直接訪問路徑達到效果
    $('.get_service2').click(function () {

        // 偽造ajax提交請求
        $.ajax({
            url:
 
'http://127.0.0.1:8001/service/',
            type: 'get',
            dataType: 'jsonp', // 偽造ajax  基於script
            jsonp: 'callbacks',
            // 隨機取一個函式名發給請求方，對方解析好後返回過來
            success: function (data) {
                console.log(data)
            }
        })

    });

服務端

import json

def
 
 service(request):
    # 等待請求返回json資料
    func = request.GET.get('callbacks')  # 固定方法名jsonp
    info = {'name': 'zok', 'age': 18}

    return HttpResponse("%s('%s')" % (func, json.dumps(info)))

jsonp獲電視臺節目案例

取到後並渲染到頁面上

// 例項基於jsonp 電視臺節目獲取
        $('.get_service3').click(function () {

        // 偽造ajax  基於script
 

        $.ajax({
            url:'http://www.jxntv.cn/data/jmd-jxtv2.html',
            type: 'get',
            dataType: 'jsonp', // 偽造ajax  基於script
            jsonp: 'callbacks',
            jsonpCallback: 'list',  // 拼函式名，如果不寫就隨機發一個函式名，對面解析好發回來

            success: function (data) {
                var html="";  //自己拼接

                // 迴圈取出資料  index 索引計次，weekday 每一天  必須要2個引數
                $.each(data.data,function (index, weekday) {
                    //取到每天的資料
                    html+='<p>'+weekday.week+'</p>';
                    $.each(weekday.list,function (i,show) {
                        html+='<a href='+show.link+'>'+show.name+'</a></br>'
                    })
                });
                $('body').append(html)
            }
        })
    })

cors 最簡單的方法

需要在服務端上加入白名單ponse[‘Access-Control-Allow-Origin’] = ‘*’ 設定好能正常傳送的ip

服務端

def serviceCors(request):
    """
    基於cors跨域
    白名單域名
    """
    info = {'name': 'zok', 'age': 18}
    response = HttpResponse(json.dumps(info))
    # 設定指定ip 或 * 全部通過
    response['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8000'  
    response['Access-Control-Allow-Origin'] = '*'
    return response

請求端

    // cors 跨域請求，方法最簡單
    $('.get_service1').click(function () {
        $.ajax({
            url:'http://127.0.0.1:8001/serviceCors/',
            type:'get',
            success:function (data) {
                console.log(data)
            }
        })
    });