前后端分离:如何解决跨域

文章目录

• • • 1.同源策略
    • 2.简单/复杂请求
    • 3.CORS
    • 4.如何解决实现CORS
    • • 1.jsonp
      • 2.添加响应头

1.同源策略

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

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

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

2.简单/复杂请求

简单请求定义

1. 只能使用get/post/head请求方式
2. HTTP 头信息不超出以下几种字段Accept, Accept-Language,Content-Language, Last-Event-ID
3. Content-Type只能是text/plain,multipart/form-data,application/x-www-from-urlencoded
4. 请求中的任意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 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。

demo.py

class Test(APIView):

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

demo.html

<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>

2.添加响应头

from django.utils.deprecation import MiddlewareMixin


 def process_response(self, request, response):
        response["Access-Control-Allow-Origin"] = "http://localhost:63342"
        if request.method == "OPTIONS":
            response["Access-Control-Allow-Methods"] = "PUT, DELETE"
            response["Access-Control-Allow-Headers"] = "content-type, X-CUSTOMER-HEADER"
            # 设置max age,浏览器端会进行缓存,没有过期之前真对同一个请求只会发送一次预检请求
            response["Access-Control-Max-Age"] = 86400
        return response