21.跨域和CORS

来源:https://www.cnblogs.com/changxin7/archive/2019/12/17/12055815.html
-Advertisement-
Play Games

一 跨域 同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。 同源策略，它是由Netscape提出的一個著名的安全策略。現在 ...


一 跨域

　　

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

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

　　簡單請求跨域

　　我們創建兩個django項目，第一個叫做s1，一個叫做s2，s1用8000埠啟動，s2用8001埠啟動

　　s1項目的index.html文件內容如下：

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

<h2>s1的首頁</h2>
<button id="btn">Ajax請求</button>


<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
<script>
    $('#btn').click(function () {
        $.ajax({
            //url:'/books/', 訪問自己伺服器的路由，同源(ip地址、協議、埠都相同才是同源)
            url:'http://127.0.0.1:8001/books/', //訪問其他伺服器的路由，不同源,那麼你可以訪問到另外一個伺服器，但是瀏覽器將響應內容給攔截了，並給你不同源的錯誤：Access to XMLHttpRequest at 'http://127.0.0.1:8001/books/' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://127.0.0.1:8002' that is not equal to the supplied origin.
            #並且註意ip地址和埠後面是一個斜杠，如果s2的這個url沒有^books的^符號，那麼可以寫兩個//。　　　　　　  type:'get',
            success:function (response) {
                console.log(response);
            }

        })
    })


</script>
</body>
</html>

　　　　urls.py文件內容如下：

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index/', views.index),
    url(r'^books/', views.books),
]

　　　　views.py內容如下：

from django.shortcuts import render,HttpResponse
from django.http import JsonResponse
# Create your views here.

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

def books(request):

    # return JsonResponse(['西游記','三國演義','水滸傳'],safe=False)
    obj = JsonResponse(['西游記','三國演義','水滸傳'],safe=False)
    return obj

　　s2項目的urls.py內容如下：

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^books/', views.books),
]

　　 　　views.py內容如下：

from django.shortcuts import render
from django.http import JsonResponse
# Create your views here.
def books(request):

    # return JsonResponse(['西游記2','三國演義2','水滸傳2'],safe=False)

    obj = JsonResponse(['西游記2','三國演義2','水滸傳2'],safe=False)
    #下麵這個響應頭信息是告訴瀏覽器，不要攔著，我就給它，"*"的意思是誰來請求我，我都給
    # obj["Access-Control-Allow-Origin"] = "*"
    obj["Access-Control-Allow-Origin"] = "http://127.0.0.1:8000" #只有這個ip和埠來的請求，我才給他數據，其他你瀏覽器幫我攔著
    return obj

　　以上是一個簡單請求的跨域問題和解決方法。

二 CORS

　　

　　CORS需要瀏覽器和伺服器同時支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低於IE10。

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

　　因此，實現CORS通信的關鍵是伺服器。只要伺服器實現了CORS介面，就可以跨源通信。

　　

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

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

（1) 請求方法是以下三種方法之一：（也就是說如果你的請求方法是什麼put、delete等肯定是非簡單請求）
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，也就是說，如果你發送的application/json格式的數據，那麼肯定是非簡單請求，vue的axios預設的請求體信息格式是json的，ajax預設是urlencoded的。

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

　　我們改一下上一節的s1項目的index.html文件中的ajax裡面的內容：

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

<h2>s1的首頁</h2>
<button id="btn">Ajax請求</button>


<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
<script>
    $('#btn').click(function () {
        $.ajax({
            url:'http://127.0.0.1:8001/books/',
            type:'post',
            contentType:'application/json',//非簡單請求，會報錯：Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
            data:JSON.stringify({
               a:'1'
            }),            //headers:{b:2},
            success:function (response) {
                console.log(response);
            }

        })
    })


</script>
</body>
</html>

　　img

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

* 簡單請求和非簡單請求的區別？

   簡單請求：一次請求
   非簡單請求：兩次請求，在發送數據之前會先發一次請求用於做“預檢”，只有“預檢”通過後才再發送一次請求用於數據傳輸。
* 關於“預檢”

- 請求方式：OPTIONS
- “預檢”其實做檢查，檢查如果通過則允許傳輸數據，檢查不通過則不再發送真正想要發送的消息
- 如何“預檢”
     => 如果複雜請求是PUT等請求，則服務端需要設置允許某請求，否則“預檢”不通過
        Access-Control-Request-Method
     => 如果複雜請求設置了請求頭，則服務端需要設置允許某請求頭，否則“預檢”不通過
        Access-Control-Request-Headers

　　　　看圖：

　　　　img

　　　　

　　s2項目的views.py內容如下：

from django.shortcuts import render
from django.http import JsonResponse
# Create your views here.
def books(request):

    # return JsonResponse(['西游記2','三國演義2','水滸傳2'],safe=False)

    obj = JsonResponse(['西游記2','三國演義2','水滸傳2'],safe=False)
    # obj["Access-Control-Allow-Origin"] = "*"
    obj["Access-Control-Allow-Origin"] = "http://127.0.0.1:8000"
    print(request.method)
    #處理預檢的options請求，這個預檢的響應，我們需要在響應頭裡面加上下麵的內容
    if request.method == 'OPTIONS':
        # obj['Access-Control-Allow-Headers'] = "Content-Type" #"Content-Type",首字母小寫也行
        # obj['Access-Control-Allow-Headers'] = "content-type" #"Content-Type",首字母小寫也行。這個content-type的意思是，什麼樣的請求體類型數據都可以，我們前面說了content-type等於application/json時，是複雜請求，複雜請求先進行預檢，預檢的響應中我們加上這個，就是告訴瀏覽器，不要攔截
        obj['Access-Control-Allow-Headers'] = "content-type,b"  #發送來的請求裡面的請求頭裡面的內容可以定義多個，後端需要將頭配置上才能訪問
    return obj

　　支持跨域，簡單請求

　　　　伺服器設置響應頭：Access-Control-Allow-Origin = '功能變數名稱' 或 '*'

　　支持跨域，複雜請求

　　　　由於複雜請求時，首先會發送“預檢”請求，如果“預檢”成功，則發送真實數據。

　　　　　　“預檢”請求時，允許請求方式則需伺服器設置響應頭：Access-Control-Request-Method

　　　　　　“預檢”請求時，允許請求頭則需伺服器設置響應頭：Access-Control-Request-Headers

　　

　　關於請求方式的跨域問題及解決方法：

　　s1的index.html文件內容如下：

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

<h2>s1的首頁</h2>
<button id="btn">Ajax請求</button>


<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
<script>
    $('#btn').click(function () {
        $.ajax({
            url:'http://127.0.0.1:8001/books/',
            //type:'delete',
            //type:'post',
            type:'put',
            contentType:'application/json',//非簡單請求，會報錯：Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
            data:JSON.stringify({
               a:'1'
            }),
            headers:{b:'2'},
            success:function (response) {
                console.log(response);
            }

        })
    })


</script>
</body>
</html>

　　s2項目的views.py內容如下：

from django.shortcuts import render
from django.http import JsonResponse
# Create your views here.
def books(request):

    # return JsonResponse(['西游記2','三國演義2','水滸傳2'],safe=False)

    obj = JsonResponse(['西游記2','三國演義2','水滸傳2'],safe=False)
    # obj["Access-Control-Allow-Origin"] = "*"
    obj["Access-Control-Allow-Origin"] = "http://127.0.0.1:8000"
    print(request.method)
    #處理預檢的options請求，這個預檢的響應，我們需要在響應頭裡面加上下麵的內容
    if request.method == 'OPTIONS':
       
        obj['Access-Control-Allow-Headers'] = "content-type,b"  #發送來的請求裡面的請求頭裡面的內容可以定義多個，後端需要將頭配置上才能訪問
        obj['Access-Control-Allow-Methods'] = "DELETE,PUT"  #通過預檢的請求方法設置

    return obj

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Dubbo源碼分析之SPI（三）
    一、概述 本篇介紹自適應擴展，方法getAdaptiveExtension()的實現。ExtensionLoader類本身很多功能也使用到了自適應擴展。包括ExtensionFactory擴展。 通俗的講，自適應擴展要實現的邏輯是：調用擴展點的方法時，自動判斷要調用那個擴展點實現類的方法。我們知道， ...
  • Softmax用於手寫數字識別（Tensorflow實現）-個人理解
    softmax函數的作用 對於分類方面，softmax函數的作用是從樣本值計算得到該樣本屬於各個類別的概率大小。例如手寫數字識別，softmax模型從給定的手寫體圖片像素值得出這張圖片為數字0~9的概率值，這些概率值之和為1。預測的結果取最大的概率表示的數字作為這張圖片的分類。 可以從下麵這張圖理解 ...
  • 最小割最大流定理&殘量網路的性質
    ...
  • Spring源碼載入BeanDefinition過程
    本文主要講解Spring載入xml配置文件的方式，跟蹤載入BeanDefinition的全過程。 源碼分析 源碼的入口 ClassPathXmlApplicationContext構造函數 new ClassPathXmlApplicationContext(“spring.xml”)用於載入CLA ...
  • Django實現標簽聯動以及xadmin中實現標簽聯動
    如圖，即實現點擊一個城市，出現對應的學校名稱。開始一直以為是建立數據表的時候實現的，原來是通過ajax實現的。 思路：當get請求顯示原始狀態（即下拉框呈現全部內容）。當點擊一個城市後，通過ajax的post方式提交，然後後端返回篩選的數據到前端，然後js先將所有的學校標簽刪除，創建後端傳過來的學校 ...
  • python中list常用的方法
    Python 列表 list （以下內容為比較初級適合小白查看的筆記） 一、介紹： 列表是Python中內置有序、可變序列，列表的所有元素放在一對中括弧“[]”中，並使用逗號分隔開； 列表可以進行增刪改查，每一次操作，都會補全列表中的位置，保證在列表中沒有縫隙 list中，可以存整數、小數、字元串等 ...
  • 文件遷移到FileTable中
    看此文檔前，先參考一下文檔 https://blog.csdn.net/downmoon/article/details/24374609 環境：阿裡雲ECS SQL Server 2017 + Delphi7 測試用xcopy，robocopy等命令遷移文件好像不太會用。有感興趣的朋友，告知一下。 ...
  • day 26-1 property、綁定與非綁定方法
    property property是一種特殊的屬性，訪問它時會執行一段功能（函數）然後返回值；就是把一個函數屬性的訪問方式變成像訪問數據屬性的方式一樣。 我們首先來看一個對比效果 例一：在調用 bmi 函數的時候需要加括弧的，可是我們往往需要另一種調用方法——不想加括弧 class people() ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類