Django實(shí)現(xiàn)跨域請(qǐng)求過(guò)程詳解

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

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

前言

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

跨域請(qǐng)求分兩種：簡(jiǎn)單請(qǐng)求、復(fù)雜請(qǐng)求.

簡(jiǎn)單請(qǐng)求

簡(jiǎn)單請(qǐng)求必須滿足下述條件.

HTTP方法為這三種方法之一：HEAD、GET、POST

HTTP頭消息不超出以下字段：

Accept、Accept-Language、Content-Language、Last-Event-ID

且Content-Type只能為下列類型中的某一個(gè)：

application/x-www-from-urlencoded
multipart/form-data
text/plain.

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

復(fù)雜請(qǐng)求會(huì)先發(fā)出一個(gè)預(yù)請(qǐng)求——預(yù)檢，OPTIONS請(qǐng)求.==

瀏覽器的同源策略

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

也就是說(shuō)，==瀏覽器會(huì)阻止非同源的請(qǐng)求.==

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

==瀏覽器只會(huì)阻止表單以及Ajax請(qǐng)求的跨域，但不會(huì)阻止src請(qǐng)求跨域.==

所以，我們的cdn、圖片等src請(qǐng)求都是正常的.

JsonP實(shí)現(xiàn)跨域

==JsonP跨域的原理是利用了瀏覽器不阻止src請(qǐng)求跨域來(lái)實(shí)現(xiàn)的.==

==JsonP只能實(shí)現(xiàn)GET請(qǐng)求跨域.==

首先準(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跨站請(qǐng)求測(cè)試</title>
</head>
<body>
<script>
  // 函數(shù)名應(yīng)為handlerResponse，這是一種約定俗成
  function handlerResponse(data) {
    alert(data)
  }
</script>
<!--必須放在被執(zhí)行函數(shù)的script標(biāo)簽的下面，否則會(huì)報(bào)錯(cuò)函數(shù)不存在-->
<script src="http://127.0.0.1:8000/test/"></script>
</body>
</html>

好了我們來(lái)測(cè)試吧

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

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

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

可實(shí)現(xiàn)簡(jiǎn)單請(qǐng)求和復(fù)雜請(qǐng)求的跨域

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

from django.utils.deprecation import MiddlewareMixin

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

    # 判斷是否為復(fù)雜請(qǐng)求
    if request.method == 'OPTIONS':
      response['Access-Control-Allow-Headers'] = 'Content-Type'
      response['Access-Control-Allow-Methods'] = 'PUT,PATCH,DELETE'

    return response

寫好之后，別忘記了去注冊(cè).

第二步視圖文件

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

class TestView(APIView):
  def get(self, request):
    return HttpResponse("這是GET請(qǐng)求的數(shù)據(jù)")
  def post(self, request):
    return HttpResponse("這是POST請(qǐng)求的數(shù)據(jù)")
  def put(self, request):
    return HttpResponse("這是PUT請(qǐng)求的數(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">點(diǎn)擊發(fā)送跨站請(qǐng)求</button>
<script>
  $('#sign').click(function () {
    $.ajax({
      url: 'http://127.0.0.1:8000/test/', // 要訪問(wèn)的外站
      type: 'put', // 請(qǐng)求類型, put為復(fù)雜請(qǐng)求
      contentType: 'application/json', // 指定為'application/json'后，將變?yōu)閺?fù)雜請(qǐng)求
      success: function (data) {
        // 請(qǐng)求成功后將執(zhí)行該函數(shù)
        // data是外站發(fā)送過(guò)來(lái)的數(shù)據(jù)
        alert(data)
      },
    });
  });
</script>
</body>
</html>

測(cè)試效果如下