目录
- JsonP实现跨域
- 在Django中间件中添加响应头
@
***
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.·
==任何不满足上述要求的请求，都会被认为是复杂请求.
复杂请求会先发出一个预请求——预检，OPTIONS请求.==
浏览器的同源策略
·
无法跨域就是被浏览器的同源策略限制的.
也就是说，==浏览器会阻止非同源的请求.==
·
那什么是非同源呢？==域名或端口不同的，都属于非同源.==
·
==浏览器只会阻止表单以及Ajax请求的跨域，但不会阻止src请求跨域.==
所以，我们的cdn、图片等src请求都是正常的.
***
JsonP实现跨域
==JsonP跨域的原理是利用了浏览器不阻止src请求跨域来实现的.==
==JsonP只能实现GET请求跨域.==
首先 准备我们的视图文件
from django.http import HttpResponse from rest_framework.views import APIView class TestView(APIView): def get(self, request): return HttpResponse("handlerResponse(‘is ok‘)") # 注意返回的函数以及参数的格式
然后 HTML文件
<!DOCTYPE html> <html lang="zh-CN"> <head> <title>JsonP跨站请求测试</title> </head> <body> <script> // 函数名应为handlerResponse，这是一种约定俗成 function handlerResponse(data) { alert(data) } </script> <!--必须放在被执行函数的script标签的下面，否则会报错函数不存在--> <script src="http://127.0.0.1:8000/test/"></script> </body> </html>
好了 我们来测试吧
可以看到，我们成功实现了跨域获取数据.
JsonP解决跨域只能发送GET请求，并且实现起来前后端交互会比较多，现在几乎已经不在使用了.
***
在Django中间件中添加响应头
可实现简单请求和复杂请求的跨域
第一步 准备中间件
from django.utils.deprecation import MiddlewareMixin class MyCors(MiddlewareMixin): def process_response(self, request, response): # 如下，等于‘*‘后，便可允许所有简单请求的跨域访问 response[‘Access-Control-Allow-Origin‘] = ‘*‘ # 判断是否为复杂请求 if request.method == ‘OPTIONS‘: response[‘Access-Control-Allow-Headers‘] = ‘Content-Type‘ response[‘Access-Control-Allow-Methods‘] = ‘PUT,PATCH,DELETE‘ return response写好之后，别忘记了去注册.
第二步 视图文件
from django.http import HttpResponse from rest_framework.views import APIView class TestView(APIView): def get(self, request): return HttpResponse("这是GET请求的数据") def post(self, request): return HttpResponse("这是POST请求的数据") def put(self, request): return HttpResponse("这是PUT请求的数")
第三步 HTML文件
<!DOCTYPE html> <html lang="zh-CN"> <head> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <title>test</title> </head> <body> <button id="sign">点击发送跨站请求</button> <script> $(‘#sign‘).click(function () { $.ajax({ url: ‘http://127.0.0.1:8000/test/‘, // 要访问的外站 type: ‘put‘, // 请求类型, put为复杂请求 contentType: ‘application/json‘, // 指定为‘application/json‘后，将变为复杂请求 success: function (data) { // 请求成功后将执行该函数 // data是外站发送过来的数据 alert(data) }, }); }); </script> </body> </html>
测试效果如下
可见，我们实现了复杂请求的跨域，简单请求就更不用说了.
好了，就到这里吧.
原文地址：https://www.cnblogs.com/zyk01/p/10176353.html