21.跨域和CORS

時間 2019-12-18

標籤 cors 简体版

原文原文鏈接

一跨域

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

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

　　簡單請求跨域vue

　　咱們建立兩個django項目，第一個叫作s1，一個叫作s2，s1用8000端口啓動，s2用8001端口啓動jquery

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

<!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文件內容以下：ajax

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內容以下：django

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內容以下：json

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內容以下：axios

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>

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

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

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

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

　　　　看圖：

　　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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

21.跨域和CORS

一 跨域

二 CORS

一跨域