前後端分離後的,瀏覽器導致的跨域問題
阿新 • • 發佈:2018-11-20
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的中介軟體中註冊該中介軟體