前后端分离跨域怎么操作

来源：千锋教育

发布人：xqq

时间： 2023-08-20 19:43:00

　　1.同源策略

　　同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源,

　　即协议不同,域名不同或者端口不同的都是非同源的

　　浏览器只阻止表单以及 ajax 请求,并不会阻止 src 请求,所以能访问cnd,图片等 src 请求

　　2.简单/复杂请求

　　简单请求定义

　　只能使用get/post/head请求方式

　　HTTP 头信息不超出以下几种字段Accept, Accept-Language,Content-Language, Last-Event-ID

　　Content-Type只能是text/plain,multipart/form-data,application/x-www-from-urlencoded

　　请求中的任意XMLHttpRequestUpload 对象均没有注册任何事件监听器 (未验证),MLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问

　　注意

　　任何一个不满足上述要求的请求,即会被认为是复杂请求

　　3.CORS

　　跨域资源共享 (Cross Origin Resource Sharing)

　　跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源,另外,规范要求,对那些可能对服务器数据产生副作用的 HTTP 请求方法,(特别是GET以外的 HTTP 请求，或者搭配某些 MIME 类型的POST请求,浏览器必须首先使用OPTIONS方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求,服务器确认允许之后,才发起实际的 HTTP 请求.在预检请求的返回中,服务器端也可以通知客户端,是否需要携带身份凭证

　　4.如何解决实现CORS

　　1.jsonp

　　Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。

class Test(APIView):

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

<button>点击我向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>

<button>点击我向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>