前后端分离后的，浏览器导致的跨域问题

1、什么是跨域？

　　就是由于域名不同，或者端口不同，或者协议不同浏览器的同源策略就会自动将不同源的请求进行阻拦。形成跨域。

2、什么是简单请求？　　

　　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

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

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

2、解决方法

　　写一个中间件，将浏览器拒绝的都让他允许就好。

<button id="my_button">点我你将有意想不到的收获</button>
    <script>
        $("#my_button").click(function () {
            $.ajax({
                url:"http://127.0.0.1:8000/cors/my_cors/",
                type:"put",                          # 复杂请求的请求方法，需要中间件中允许Methods
                contentType:"application/json",      # 配置了ContentType，中间件中要写相应的命令允许
                success:function (data) {
                    console.log(data)
                }
            })
        })
    </script>

from django.utils.deprecation import MiddlewareMixin


class MyCors(MiddlewareMixin):
    def process_response(self, request, response):
        # 写了这条命令后,默认允许所有
        response["Access-Control-Allow-Origin"] = "*"
        # 如果是复杂请求，就会先发送一个OPTIONS进行预检测
        if request.method == "OPTIONS":
            # 当AJAX 请求中如果设置了ContentType,就需要在中间件中写这条允许Content-Type
            response["Access-Control-Allow-Headers"] = "Content-Type"
            # 如果是put,patch,delete 等请求方式，需要先配置以下命令
            response["Access-Control-Allow-Methods"] = "PUT,PATCH,DELETE"
        return response

中间件中配置，解决跨域

　　然后在settings的中间件中注册该中间件

秒客网

前后端分离后的，浏览器导致的跨域问题

相关文章