在django中解决跨域AJAX

Posted 2021-01-19 _杨魏

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在django中解决跨域AJAX相关的知识，希望对你有一定的参考价值。

由于浏览器存在同源策略机制，同源策略阻止从一个源加载的文档或脚本获取另一个源加载的文档的属性。

特别的：由于同源策略是浏览器的限制，所以请求的发送和响应是可以进行，只不过浏览器不接收罢了。

浏览器同源策略并不是对所有的请求均制约：

制约：XmlHttpRequest
不制约：img、iframe、script等具有src属性的标签

跨域，跨域名访问，如：http://www.c1.com域名向http://www.cw.com域名发送请求。

1. JSONP实现跨域请求

JSONP(JSONP-JSON with Padding是JSON的一种“使用模式”)，是利用script标签的src属性（浏览器允许script标签跨域）。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9     <p>
10         <input type="button" onclick="Jsonp1();"  value=‘提交‘/>
11     </p>
12 
13     <p>
14         <input type="button" onclick="Jsonp2();" value=‘提交‘/>
15     </p>
16 
17     <script type="text/javascript" src="jquery-1.12.4.js"></script>
18     <script>
19         function Jsonp1(){
20             var tag = document.createElement(‘script‘);
21             tag.src = "http://c2.com:8000/test/";
22             document.head.appendChild(tag);
23             document.head.removeChild(tag);
24 
25         }
26 
27         function Jsonp2(){
28             $.ajax({
29                 url: "http://c2.com:8000/test/",
30                 type: ‘GET‘,
31                 dataType: ‘JSONP‘,
32                 success: function(data, statusText, xmlHttpRequest){
33                     console.log(data);
34                 }
35             })
36         }
37 
38 
39     </script>
40 </body>
41 </html>
42 
43 基于JSONP实现跨域Ajax - Demo

基于JSONP实现跨域Ajax -Demo

2. CORS

随着技术的发展，现在的浏览器可以支持主动设置从而允许跨域请求，即：跨域资源共享（CORS，Cross-Origin Resource Sharing），其本质是设置响应头，使得浏览器允许跨域请求。

* 简单请求 OR 非简单请求

条件：
    1、请求方式：HEAD、GET、POST
    2、请求头信息：
            Accept
            Accept-Language
            Content-Language
            Last-Event-ID
            Content-Type 对应的值是以下三个中的任意一个：
                                                  application/x-www-form-urlencoded
                                                  multipart/form-data
                                                  text/plain
注意：同时满足以上两个条件时，则是简单请求，否则为复杂请求

* 简单请求和非简单请求的区别？

简单请求：一次请求。
非简单请求：两次请求，在发送数据之前会先发一次请求用于做“预检”， 只有“预检”通过后才再发送一次请求用于数据传输。

* 关于预检

— 请求方式：OPTIONS
— “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的“消息”
— 如何“预检”
    —— 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过Access-Control-Request-Method
    —— 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过Access-Control_Request-Headers

3. 在django中支持跨域，复杂请求

由于复杂请求时，首先会发送“预检”请求，如果“预检”成功则发送真实数据。

“预检”请求时，允许请求方式则需服务器设置响应头：Access-Control-Request-Method

“预检”请求时，允许请求头则需要服务器设置响应头：Access-Control-Request_Headers

“预检”缓存时间，服务器设置响应头：Access-Control-Max-Age

在django中设置中间件，可以解决跨域问题，具体做法如下：

第一步：在需要解决跨域的app中新建一个文件夹【middleware】，然后再新建一个python文件【cros.py】。

第二步：在py文件【cros.py】中，写入代码如下：

1 from django.utils.deprecation import MiddlewareMixin
2 
3 class CORS(MiddlewareMixin):
4     def process_response(self, request, response):
5         response[‘Access-Control-Allow-Origin‘] = "*"
6         response[‘Access-Control-Allow-Headers‘] = "Content-Type"
7         response[‘Access-Control-Allow-Method‘] = "PUT,DELETE"
8         return response

Django中间件解决跨域问题

第三步：将【cros.py】注册在【settings】中的【MIDDLEWARE】中

以上是关于在django中解决跨域AJAX的主要内容，如果未能解决你的问题，请参考以下文章

Django 第十九篇JS实现的ajax同源策略和前端jsonp解决跨域问题