qhfl-1 跨域
CORS跨域請求
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請求入手來實現的
from django.shortcuts import render from django.http import HttpResponse from rest_framework.views import APIView from rest_framework.response import Response# Create your views here.class DemoView(APIView):def get(self, request):res = "handlerResponse('跨域測試')"return HttpResponse(res)def put(self, request):return Response("put接口測試")def post(self, request):return Response("POST接口測試") JsonP實現的后端代碼JsonP解決跨域只能發送get請求，并且實現起來需要前后端交互比較多。
JsonP解決跨域
jsonp 用 script 的方式去請求，只能通過get請求數據
<script>function handlerResponse(data) {console.log(data)}</script><script src="http://127.0.0.1:8000/demo/"></script>添加響應頭解決跨域
告訴瀏覽器不要攔截來解決跨域
中間件 middlewares.py
from django.utils.deprecation import MiddlewareMixinclass MyCors(MiddlewareMixin):def process_response(self, request, response):response["Access-Control-Allow-Origin"] = "*" # 任何跨域都不攔截if request.method == "OPTIONS": # 預檢，OPTIONS請求response["Access-Control-Allow-Methods"] = "PUT, DELETE"response["Access-Control-Allow-Headers"] = "content-type"return response <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script><script>function handlerResponse(data) {console.log(data)}</script><script src="http://127.0.0.1:8000/demo/"></script> </head> <body> <div id="app"></div> <script>const app = new Vue({el: "#app",mounted(){axios.request({url: "http://127.0.0.1:8000/demo/",method: "PUT",data: {"name": "Alex"}}).then(function (data) {console.log(data)})}}) </script></body> </html> request.html總結
- 上一篇： drf8 解析器
- 下一篇： qhfl-2 ContentType组件