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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類