Django - Jsonp、CORS

時間  2019-11-13
標籤 django jsonp cors 欄目 Python 简体版
原文   原文鏈接

1、同源策略

https://www.cnblogs.com/yuanchenqi/articles/7638956.htmljavascript

同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，若是缺乏了同源策略，則瀏覽器的正常功能可能都會受到影響。能夠說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。html

同源策略，它是由 Netscape提出的一個著名的 安全策略。如今全部支持JavaScript 的瀏覽器都會使用這個策略。所謂 同源是指，域名，協議，端口相同。 當一個瀏覽器的兩個tab頁中分別打開來 百度和谷歌的頁面當瀏覽器的百度tab頁執行一個腳本的時候會檢查這個腳本是屬於哪一個頁面的，即檢查是否同源，只有和百度同源的腳本纔會被執行。若是非同源，那麼在請求數據時，瀏覽器會在控制檯中報一個異常，提示拒絕訪問。
 
 

 

示例：
java

8005:jquery

from django.contrib import admin
from django.urls import path

from app01 import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', views.index),
    path('service/', views.service),
]

---------------------------------------------

from django.shortcuts import render,HttpResponse

def index(request):
    return render(request,'index.html')

def service(request):
    print('端口8005，alex')
    return HttpResponse('端口8005,alex')

-----------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>

<h3>index</h3>
<button class="get_server">alex</button>


<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">
    $('.get_server').click(function () {
        $.ajax({
            url:'/service/',
            success:function (data) {
                console.log(data)
            }
        })
    })
</script>

</body>
</html>

 

8003：ajax

urls / view 一致django

注意：url:'http://127.0.0.1:8005/service/  跨域訪問，瀏覽器攔截了！！
json

其實/8005/service.... 已經訪問了，可是因爲 瀏覽器的同源策略  給攔截了！！跨域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>

<h3>index</h3>
<button class="get_server">egon</button>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">

    $('.get_server').click(function () {

        $.ajax({
            url:'http://127.0.0.1:8005/service/',
            success:function (data) {
                console.log(data)
            }
        })
    })
</script>

</body>
</html>

2、Jsonp、cors

jsonp是json用來跨域的一個東西。原理是經過script標籤的跨域特性來繞過同源策略。瀏覽器

那這是，怎麼回事呢？ 這也是跨域呀！！
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

 

2.一、版本1：

藉助script標籤，實現跨域請求安全

 

 

8005：

import json
def service(request):

 info = {'name':'alex','age':34,'price':200}
 return HttpResponse("func('%s')"%json.dumps(info))

 

8003：

<script type="text/javascript">
 function func(arg) {
 console.log(arg);
 console.log(typeof arg);
 var data = JSON.parse(arg);
 console.log(data);
 console.log(typeof data);
 }

</script>

<script src="http://127.0.0.1:8005/service/"></script>

 

這其實就是JSONP的簡單實現模式，或者說是JSONP的原型：建立一個回調函數，而後在遠程服務上調用這個函數而且將JSON 數據形式做爲參數傳遞，完成回調。

將JSON數據填充進回調函數，這就是JSONP的JSON+Padding的含義。

通常狀況下，咱們但願這個script標籤可以動態的調用，而不是像上面由於固定在html裏面因此沒等頁面顯示就執行了，很不靈活。咱們能夠經過javascript動態的建立script標籤，這樣咱們就能夠靈活調用遠程服務了。 

 

2.二、版本2：

動態建立script標籤

<button class="get_server">egon</button>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">
 function func(arg) {
 console.log(arg);
 console.log(typeof arg);
 var data = JSON.parse(arg);
 console.log(data);
 console.log(typeof data);

 }

 function get_jsonp_data(url) {
 var ele_script = $("<script>");
 ele_script.attr("src",url);
 ele_script.attr("id",'jsonp');
 $("body").append(ele_script);
 $("#jsonp").remove();
 }

 $('.get_server').click(function () {
 get_jsonp_data("http://127.0.0.1:8005/service/")
 });
 
</script>

 

注意：

　　 function func(arg) {}  必須和 8005的 HttpResponse("func('%s')"%json.dumps(info))  保持一致！

BUT:

　　如何將 主動權 掌握在 客戶端 這邊？

$('.get_server').click(function () {
 get_jsonp_data("http://127.0.0.1:8005/service/?callbacks=func")
});

 　　

import json
def service(request):
 info = {'name':'alex','age':34,'price':200}
 func = request.GET.get('callbacks')
 return HttpResponse("%s('%s')"%(func,json.dumps(info)))

 

2.三、版本3：

Jquery對Jsonp的實現

<script type="text/javascript">

 function func(arg) {
 console.log(arg);
 console.log(typeof arg);
 var data = JSON.parse(arg);
 console.log(data);
 console.log(typeof data);

 }

 $('.get_server').click(function () {
 // 僞 ajax ,本質上利用 script src 屬性
 $.ajax({
 url:'http://127.0.0.1:8005/service/',
 dataType:'jsonp',
 jsonp:'callbacks',
 jsonpCallback:'func'
 });
 });

</script>

 

注意：

import json
def service(request):
 info = {'name':'alex','age':34,'price':200}
 func = request.GET.get('callbacks')
 return HttpResponse("%s('%s')"%(func,json.dumps(info)))

 

func 不用單獨定義一個函數  ？？ 其實，jqeury會自動生成隨機 str，不用咱們管！！

 

 

<button class="get_server">egon</button>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">

 $('.get_server').click(function () {
 // 僞 ajax ,本質上利用 script src 屬性
 $.ajax({
 url:'http://127.0.0.1:8005/service/',
 dataType:'jsonp',
 jsonp:'callbacks',
 success:function (arg) {
 console.log(arg);
 console.log(typeof arg);
 var data = JSON.parse(arg);
 console.log(data);
 console.log(typeof data);
 }
 });
 });

</script>

 

import json
def service(request):
 info = {'name':'alex','age':34,'price':200}
 func = request.GET.get('callbacks')  # jQuery21405849947152306905_1529041780670
 return HttpResponse("%s('%s')"%(func,json.dumps(info)))

 

2.四、版本4：

Jsonp應用

 

 code:

<h3>index</h3>
<button class="get_server">egon</button>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">

 // http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403

 $('.get_server').click(function () {
 // 僞 ajax ,本質上利用 script src 屬性
 $.ajax({
 url:'http://www.jxntv.cn/data/jmd-jxtv2.html',
 dataType:'jsonp',
 jsonp:'callbacks',
 jsonpCallback:'list',
 success:function (arg) {
 console.log(arg.data);

 var html = "";
 $.each(arg.data,function (i,weekday) {
 console.log(weekday); // {week: "週日", list: Array(19)}

 html += "<ul>"+weekday.week+"</ul>";

 $.each(weekday.list,function (j,show) {
 html += "<li><a href="+show.link+">"+show.name+"</a>" +
 "&nbsp;&nbsp;<span>"+show.time+"</span></li>";

 })
 });

 $('body').append(html);
 }
 });
 });

</script>

 

2.五、版本5：

cors

get請求，注意

response['Access-Control-Allow-Origin'] = "http://127.0.0.1:8003"

<script type="text/javascript">

 $('.get_server').click(function () {
 $.ajax({
 url:'http://127.0.0.1:8005/service/',
 success:function (arg) {
 console.log(arg);
 console.log(typeof arg);
 var data = JSON.parse(arg);
 console.log(data);
 console.log(typeof data);
 }

 })
 })
 
</script>

 

import json
def service(request):
 info = {'name':'alex','age':34,'price':200}

 response = HttpResponse(json.dumps(info))

 # 告訴瀏覽器 你別攔了
 # response['Access-Control-Allow-Origin'] = "http://127.0.0.1:8003"
 response['Access-Control-Allow-Origin'] = "*"

 return response

 

 

3、補充cors - 簡單請求，複雜請求

1、簡介

CORS須要瀏覽器和服務器同時支持。目前，全部瀏覽器都支持該功能，IE瀏覽器不能低於IE10。

整個CORS通訊過程，都是瀏覽器自動完成，不須要用戶參與。對於開發者來講，CORS通訊與同源的AJAX通訊沒有差異，代碼徹底同樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感受。

所以，實現CORS通訊的關鍵是服務器。只要服務器實現了CORS接口，就能夠跨源通訊。

2、兩種請求

瀏覽器將CORS請求分紅兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。

只要同時知足如下兩大條件，就屬於簡單請求。

複製代碼 
（1) 請求方法是如下三種方法之一：
HEAD
GET
POST
（2）HTTP的頭信息不超出如下幾種字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain
複製代碼

凡是不一樣時知足上面兩個條件，就屬於非簡單請求。

瀏覽器對這兩種請求的處理，是不同的。

複製代碼 
* 簡單請求和非簡單請求的區別？

   簡單請求：一次請求
   非簡單請求：兩次請求，在發送數據以前會先發一次請求用於作「預檢」，只有「預檢」經過後纔再發送一次請求用於數據傳輸。
* 關於「預檢」

- 請求方式：OPTIONS
- 「預檢」其實作檢查，檢查若是經過則容許傳輸數據，檢查不經過則再也不發送真正想要發送的消息
- 如何「預檢」
     => 若是複雜請求是PUT等請求，則服務端須要設置容許某請求，不然「預檢」不經過
        Access-Control-Request-Method
     => 若是複雜請求設置了請求頭，則服務端須要設置容許某請求頭，不然「預檢」不經過
        Access-Control-Request-Headers
複製代碼

 

支持跨域，簡單請求

服務器設置響應頭：Access-Control-Allow-Origin = '域名' 或 '*'

支持跨域，複雜請求

因爲複雜請求時，首先會發送「預檢」請求，若是「預檢」成功，則發送真實數據。

  • 「預檢」請求時，容許請求方式則需服務器設置響應頭：Access-Control-Request-Method
  • 「預檢」請求時，容許請求頭則需服務器設置響應頭：Access-Control-Request-Headers

 

https://www.cnblogs.com/yuanchenqi/articles/7638956.html#_label7

http://www.cnblogs.com/wupeiqi/articles/5703697.html

 

    簡單請求 複雜請求
            條件：
            
                一、請求方式：HEAD、GET、POST
                二、請求頭信息：
                    Accept
                    Accept-Language
                    Content-Language
                    Last-Event-ID
                    Content-Type 對應的值是如下三個中的任意一個
                                            application/x-www-form-urlencoded
                                            multipart/form-data
                                            text/plain
             
                注意：同時知足以上兩個條件時，則是簡單請求，不然爲複雜請求
                
                若是是複雜請求： 
                    options請求進行預檢，經過以後才能發送POST請求

 

遇到跨域，簡單請求 複雜請求

寫一箇中間件：

cors.py:

from django.utils.deprecation import MiddlewareMixin

class CORSMiddleware(MiddlewareMixin):
    def process_response(self,request,response):
        # 容許你的域名來訪問
        response['Access-Control-Allow-Origin'] = "*"

        if request.method == 'OPTIONS':
            # 容許你攜帶 Content-Type 請求頭 不能寫*
            response['Access-Control-Allow-Headers'] = 'Content-Type'
            # 容許你發送 DELETE PUT請求
            response['Access-Control-Allow-Methods'] = 'DELETE,PUT'

        return response

 

 

 

Django處理PUT請求有幾個點須要注意：

CSRF配置

爲了防止跨站攻擊，Django默認會對POST/PUT/DELETE這幾種操做進行csrf token檢查。POST能夠將其放到post的參數中，但Django對PUT/DELETE只能經過檢查Header的方式檢查csrf token。
因此應當在HTML中確認發送以前配置了Ajax的頭：

function csrfSafeMethod(method) { // these HTTP methods do not require CSRF protection return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); } $.ajaxSetup({ beforeSend: function(xhr, settings) { if (!csrfSafeMethod(settings.type) && !this.crossDomain) { xhr.setRequestHeader("X-CSRFToken", csrftoken); } } });

經過Ajax發送PUT/DELETE請求

須要注意的幾個地方：

  1. 設置type爲PUT，DELETE同理

  2. url必須以/結尾

    $.ajax({
         url: dbUrl + tableName + "/", // Append back slash for put request type: "PUT", data: {"key": key, "field": field, "field-value": input.value}, success: function(result) { input.style.backgroundColor = "#b3ffb3"; }, error: function(event, XMLHttpRequest, ajaxOptions, thrownError) { input.style.backgroundColor = "#ffad99"; input.value = oldValue } });

後臺處理參數

Django對於PUT/DELETE請求並無像POST/GET那樣有一個字典結構。咱們須要手動處理request.body獲取參數：

from django.http import QueryDict put = QueryDict(request.body) key = put.get('key') field = put.get('field') field_value = put.get('field-value')

 

發的delete請求：


$.ajax({
　　url: "/administration/detail/",
　　type: "delete",
　　headers: {"X-CSRFtoken": $('input[name="csrfmiddlewaretoken"]').val()},
　　data: {
　　　　user_name: user,
　　　　app_list: JSON.stringify(permissions_list),
　　},
　　success: function (res) {

　　} })

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程