CORS的原理及应用
CORS是跨站资源共享,同样是解决浏览器的同源策略
其本质是设置响应头,使得浏览器允许跨域请求。
第三方网站返回数据的时候在浏览器的响应头中添加允许的域名,允许所有的用*
1 简单请求
简单请求是只发一次请求
ajax请求不变,第三方后台修改
s4的后台,在返回值中添加允许的域名和端口,注意不同后面写具体的域名,自己出错是在后面加上了cors
允许所有的,用*
1 2 3 4 5 6 7 8 9 10 11 12
| def new_users(request): print('请求is coming') user_list = [ 'aaa', 'bbb', 'ccc' ] user_list_str = json.dumps(user_list) obj = HttpResponse(user_list_str) obj['Access-Control-Allow-Origin']='http://www.s5.com:8000' return obj
|
s5前端没有改变
1 2 3 4 5 6 7 8 9 10 11 12 13
| <input type="button" value="获取用户列表" onclick="getUsers();" /> <script src="/static/jquery-3.2.1.js"></script> <script> function getUsers(){ $.ajax({ url: 'http://www.s4.com:8001/new_users/', type:"GET", success:function(arg){ console.log(arg); } }) } </script>
|
1 非简单请求
两次请求,在发送数据之前会先发一次请求用于做“预检”,只有“预检”通过后才再发送一次请求用于数据传输
第一次发送的是OPTION请求,在OPTION中进行校验,只有校验通过才能发其他的请求
如发送DELETE请求,第一次接受的是OPTIONS请求
s5前端
1 2 3 4 5 6 7 8 9 10 11 12 13
| <input type="button" value="获取用户列表" onclick="getUsers();" /> <script src="/static/jquery-3.2.1.js"></script> <script> function getUsers(){ $.ajax({ url: 'http://www.s4.com:8001/new_users/', type:"DELETE", //delete是复杂请求 success:function(arg){ console.log(arg); } }) } </script>
|
s4后台
注意是OPTIONS,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| def new_users(request): print(request.method) if request.method == "OPTIONS": obj = HttpResponse() obj['Access-Control-Allow-Origin']='*' obj['Access-Control-Allow-Methods'] = "DELETE" return obj user_list = [ 'aaa', 'bbb', 'ccc' ] user_list_str = json.dumps(user_list) obj = HttpResponse(user_list_str) obj['Access-Control-Allow-Origin'] = '*' return obj
|
参考:
http://www.cnblogs.com/wupeiqi/articles/5703697.html