跨域两种方案

跨域中间件文件

JsonP解决

• 客户端

1. 通过js代码动态script标签，将请求生成src
2. 定义一个回调函数

• 服务端

1. 获取到回调函数名
2. 返回数据格式：函数名(数据）

<div>
<input type='button' onclick='get_data'   value="点击获取">
</div>


<script>

function get_data(){
    // 发送一个jsonp请求
        var tag = document.createElement('script');
        tag.src = "http://www.baidu.com/data.html?callback=list"
        document.head.appendChild(tag);
        document.head.removed(tag);    // 发送请求完后动态删除标签
    }

// 定义一个和callback函数名一样的函数
function list(arg){

    console.log(arg)
    
    }

</script>

CORS

CORS即Cross Origin Resource Sharing 跨域资源共享，

那么跨域请求还分为两种，一种叫简单请求，一种是复杂请求~~

• 简单请求
  HTTP方法是下列方法之一

　　HEAD， GET，POST

HTTP头信息不超出以下几种字段

　　Accept， Accept-Language， Content-Language， Last-Event-ID

　　Content-Type只能是下列类型中的一个

　　　　application/x-www-from-urlencoded

　　　　multipart/form-data

　　　　text/plain

任何一个不满足上述要求的请求，即会被认为是复杂请求~~【 json格式的数据就是一个负责请求】

复杂请求会先发出一个预请求，我们也叫预检，OPTIONS请求~~

浏览器的同源策略

跨域是因为浏览器的同源策略导致的，也就是说浏览器会阻止非同源的请求~~

那什么是非同源呢 即域名不同，端口不同都属于非同源的~~

浏览器只阻止表单以及ajax请求，并不会阻止src请求，所以我们的cnd，图片等src请求都可以发~~

• JSONP

jsonp的实现原理是根据浏览器不阻止src请求入手_来实现的~

• 后端

class Test(APIView):

    def get(self, request):
        callback = request.query_params.get("callback", "")
        ret = callback + "(" + "'success'" + ")"
        return HttpResponse(ret)

• 前端

 <button id="btn_one">点击我向JsonP1发送请求</button>
 <script>
    // 测试发送请求失败 跨域不能得到数据
    $('#btn_one').click(function () {
        $.ajax({
            url: "http://127.0.0.1:8000/jsonp1",
            type: "get",
            success: function (response) {
                console.log(response)
            }
        })
    });
    
    function handlerResponse(response) {
        alert(response)
    };
    
    window.onload = function () {
        $("#btn_one").click(function () {
            let script_ele = document.createElement("script");
            script_ele.src = "http://127.0.0.1:8000/jsonp1?callback=handlerResponse";
            document.body.insertBefore(script_ele, document.body.firstChild);
        })
    }

</script>

• ** JsonP解决跨域只能发送get请求，并且实现起来需要前后端交互比较多。**

• CORS

就是服务端添加响应头response["Access-Control-Allow-Origin"] = "*"，如果是复杂请求，会先发option请求预检

• django可以在中间件中实现,自定义一个中间件，然后去setting中注册

    
from django.utils.deprecation import MiddlewareMixin


class ExemptAllowOriginMiddleware(MiddlewareMixin):
    """解决跨域，添加一个响应头"""

    def process_reponse(self, request, response):
        response["Access-Control-Allow-Origin"] = '*'
        if request.method == 'OPTIONS':
            # 本质是在请求头里加上一个请求头，ajax中header对应的字典里的字段
            response['Access-Control-Allow-Headers'] = "Content-Type"
            response['Access-Control-Allow-Methods'] = "POST,PUT,PATCH,DELETE"
            return response