二十五、JSON跨域

合集 - Python全栈（Django）(35)

1.一、计算机初识2024-02-112.二、数据概述2024-02-113.六、ip地址与子网划分2024-02-114.五、网络通信实现2024-02-115.四、字符编码2024-02-116.三、网络基础2024-02-117.十四、MySQL与Django之Model基础2024-02-118.十三、Django Admin2024-02-119.十二、Django视图函数和模版相关2024-02-1110.十一、Django url控制系统2024-02-1111.十、Django静态文件2024-02-1112.九、Django环境搭建（基于anaconda环境）2024-02-1113.八、Python开发环境管理2024-02-1114.七、ip地址配置2024-02-11

15.二十五、JSON跨域2024-02-12

16.二十四、文件上传2024-02-1117.二十三、Django Serializes2024-02-1118.二十二、Django之Form组件2024-02-1119.二十一、分页2024-02-1120.JS笔记2024-02-1121.二十、基于Bootstrap和FontAwesome制作页面2024-02-1122.十九、Ajax和iFrame2024-02-1123.十八、Django之Http2024-02-1124.十七、Cookie和Session2024-02-1125.十六、Django的ORM（二）2024-02-1126.十五、Django的ORM2024-02-1127.实践中前端的一些笔记2024-02-1228.二十六、登录相关2024-02-1229.二十九、RBAC+动态菜单2024-02-1230.二十八、XSS2024-02-1231.JS第三方插件2024-02-1232.二十七、简单的验证码实现2024-02-1233.三十二、Django实践的笔记2024-02-1334.三十一、动态Form2024-02-1335.三十、Kingadmin2024-02-12

收起

web项目中，向其它ip地址发送请求时会受到浏览器同源策略的限制 : 对方受到请求，并作出响应，但浏览器限制了接受响应。

# 受到同源策略的限制
$.ajax({
        url:'http://127.0.0.1:9000/ajax_jsonp.html',
        type:'GET',
        data：{}，
        success：function(arg) {
          // 收不到
        }
    })

# 127.0.0.1:9000的视图函数
def ajax_jsonp(request):
    print(".....")
    return HttpResponse("abcdefg")

127.0.0.1:9000实际有走到ajax_jsonp函数。但浏览器报错：

# blocked by CORS policy
Access to XMLHttpRequest at 'http://127.0.0.1:9000/ajax_jsonp.html'
from origin 'http://127.0.0.1:8000' has been blocked by CORS policy
: NO 'Access-Control-Allow-Orign' header is present on the requested
resource.

XMLHttpRequest 遵循该策略。

解决办法：Iframe标签 img标签 Script标签 这些有scr属性的可突破同源策略
创建script标签，将需要访问的url给src属性赋值，这时点击页面按钮，触发函数：

# script标签突破同源策略
function submitJsonp2() {
    var tag = document.createElement('script');
    tag.src = 'http://127.0.0.1:9000/iamother.html';
 	 # 添加tag，从而发送请求。然后马上移除tag
    document.head.appendChild(tag);
    document.head.removeChild(tag);
}

这时，浏览器依然报错： 返回的字符串is not defined
Uncaught ReferenceError: abcdefg is not defined
报错原因是返回的数据不是js
修改127.0.0.1:9000项目的响应：数据外层包裹一个函数名

# 127.0.0.1:9000的视图函数
def ajax_jsonp(request):
    print(".....")
    return HttpResponse("dd('abcdefg');")

当前页面html定义相同名字的函数：

# html
function dd(arg){
  console.log(arg); # ajax_jsonp请求返回的数据就在这里拿到
}

以上这种随机生成一个script 加在head上，然后又移除的方式 叫做JSONP

# Ajax提供了jsonp的方式
$.ajax({
        url:'http://127.0.0.1:9000/ajax_jsonp.html',
        type:'GET',
        dataType: 'jsonp',
    })

完善：
在url后拼接参数callback=.....
对方接收请求，从callback参数获得指定的函数名，在返回数据时，用指定的函数名包裹数据返回 :

# 从callback参数获得指定的函数名
def ajax_jsonp(request):
    name = request.GET.get('callback')
    return HttpResponse("%s('abcdefg');"%(name))

# 使用ajax时这样传callback参数：
$.ajax({
        url:'http://127.0.0.1:9000/ajax_jsonp.html',
        type:'GET',
        dataType: 'jsonp',
        jsonp:'callback',
        jsonpCallback:'list',
    })

注意：jsonp只能发get请求。改type=POST都不起作用。因为本质是设置标签的src
JSONP：利用创建script块，在其中执行src属性为：远程url
跨域的另一种方式：CORS

#设置响应头，让浏览器允许通过
def cors_test(request):
	obj = HttpResponse('faadssa')
    obj['Access-Control-Allow-Origin'] = '*'
	return obj