跨域不停球资源的几种方式

1, 什么是跨域

2, JSONP

3, 中间件

　　由于浏览器同源策略, 凡是发送请求url的协议, 域名, 端口三者之间任意一与当前地址不同即为跨域.具体可以查看下表

 

JSONP

　　这种方式主要是通过动态插入一个script标签.浏览器对script的资源 引用没有同源限制,同时资源加载到页面后会立即执行(没有阻塞的情况下).

1 <script>
2       var _script = document.createElement('script');
3       _script.type = "text/javascript";
4       _script.src = "http://localhost:8888/jsonp?callback=f";
5       document.head.appendChild(_script);
6     </script>

　　实际项目中JSONP通常用来获取json格式数据, 这是前后端通常约定一个参数callback, 该参数的值, 就是处理返回数据的函数名称.

 1 <!doctype html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
 6     <title>jsonp_test</title>
 7 
 8     <script>
 9       var f = function(data){
10         alert(data.name);
11       }
12       /*var xhr = new XMLHttpRequest();
13       xhr.onload = function(){
14         alert(xhr.responseText);
15       };
16       xhr.open('POST', 'http://localhost:8888/cors', true);
17       xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
18       xhr.send("f=json");*/
19     </script>
20     
21     <script>
22       var _script = document.createElement('script');
23       _script.type = "text/javascript";
24       _script.src = "http://localhost:8888/jsonp?callback=f";
25       document.head.appendChild(_script);
26     </script>
27   </head>
View Code
def jsonp1(request):
    callback = request.GET.get("callback", "")
    ret = callback + "('hello')"
    return HttpResponse(ret)

动态的script标签

window.onload = function() {
    let ele = document.createElement("script");
    ele.src = "http://127.0.0.1:8000/jsonP1?callback=handlerResponse"
    document.body.insertBefore(ele, null)  
}

function handlerResponse(data){
   alert(data) 
}

 

写一个中间件

from django.utils.deprecation import MiddlewareMixin

class MyCors(ModdlewareMixin):
    response["Access-Control-Allow-Origin"] = "*"
    if request.method == "OPTIONS":
        request["Access-Control-Allow-Headers"] = "Content-Type"
        response["Access-Control-Allow-Methods"] = "POST, PUT, PATCH, DELETE"
    return response

区分简单请求.

简单请求就是

response["Access-Control-Allow-Origin"] = "*"

复杂请求, 会先发送预检请求 OPTIONS

response["Access-Control-Allow-Headers"] = "Content-Type"
response["Access-Control-Allow-Methods"] = "POST, PUT, PATCH, DELETE"

 

posted @ 2018-11-02 20:57  猴里吧唧  阅读(122)  评论(0)    收藏  举报