Django實現(xiàn)跨域請求過程詳解

更新時間：2019年07月25日 15:26:32 作者：Title

這篇文章主要介紹了Django實現(xiàn)跨域請求過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

前言

CORS 即 Cross Origin Resource Sharing 跨域資源共享.

跨域請求分兩種：簡單請求、復(fù)雜請求.

簡單請求

簡單請求必須滿足下述條件.

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.

==任何不滿足上述要求的請求，都會被認(rèn)為是復(fù)雜請求.

復(fù)雜請求會先發(fā)出一個預(yù)請求——預(yù)檢，OPTIONS請求.==

瀏覽器的同源策略

無法跨域就是被瀏覽器的同源策略限制的.

也就是說，==瀏覽器會阻止非同源的請求.==

那什么是非同源呢？==域名或端口不同的，都屬于非同源.==

==瀏覽器只會阻止表單以及Ajax請求的跨域，但不會阻止src請求跨域.==

所以，我們的cdn、圖片等src請求都是正常的.

JsonP實現(xiàn)跨域

==JsonP跨域的原理是利用了瀏覽器不阻止src請求跨域來實現(xiàn)的.==

==JsonP只能實現(xiàn)GET請求跨域.==

首先準(zhǔn)備我們的視圖文件

from django.http import HttpResponse
from rest_framework.views import APIView

class TestView(APIView):
  def get(self, request):
    return HttpResponse("handlerResponse('is ok')")
    # 注意返回的函數(shù)以及參數(shù)的格式

然后 HTML文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>JsonP跨站請求測試</title>
</head>
<body>
<script>
  // 函數(shù)名應(yīng)為handlerResponse，這是一種約定俗成
  function handlerResponse(data) {
    alert(data)
  }
</script>
<!--必須放在被執(zhí)行函數(shù)的script標(biāo)簽的下面，否則會報錯函數(shù)不存在-->
<script src="http://127.0.0.1:8000/test/"></script>
</body>
</html>

好了我們來測試吧

可以看到，我們成功實現(xiàn)了跨域獲取數(shù)據(jù).

JsonP解決跨域只能發(fā)送GET請求，并且實現(xiàn)起來前后端交互會比較多，現(xiàn)在幾乎已經(jīng)不在使用了

在Django中間件中添加響應(yīng)頭

可實現(xiàn)簡單請求和復(fù)雜請求的跨域

第一步準(zhǔn)備中間件

from django.utils.deprecation import MiddlewareMixin

class MyCors(MiddlewareMixin):
  def process_response(self, request, response):
    # 如下，等于'*'后，便可允許所有簡單請求的跨域訪問
    response['Access-Control-Allow-Origin'] = '*'

    # 判斷是否為復(fù)雜請求
    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請求的數(shù)據(jù)")
  def post(self, request):
    return HttpResponse("這是POST請求的數(shù)據(jù)")
  def put(self, request):
    return HttpResponse("這是PUT請求的數(shù)")

第三步 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">點擊發(fā)送跨站請求</button>
<script>
  $('#sign').click(function () {
    $.ajax({
      url: 'http://127.0.0.1:8000/test/', // 要訪問的外站
      type: 'put', // 請求類型, put為復(fù)雜請求
      contentType: 'application/json', // 指定為'application/json'后，將變?yōu)閺?fù)雜請求
      success: function (data) {
        // 請求成功后將執(zhí)行該函數(shù)
        // data是外站發(fā)送過來的數(shù)據(jù)
        alert(data)
      },
    });
  });
</script>
</body>
</html>

測試效果如下