面試彙總——知道什麼是同源策略嗎？那怎麼解決跨域問題？知道 JSONP 原理嗎？什麼是同源策略,什麼是跨域,如何跨域,Jsonp/CORS跨域

時間 2019-12-05

標籤面試彙總知道什麼同源策略怎麼解決問題 jsonp 原理如何 cors 欄目快樂工作简体版

原文原文鏈接

本文是面試彙總分支——知道什麼是同源策略嗎？那怎麼解決跨域問題？知道 JSONP 原理嗎？。javascript

同源策略

同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，若是缺乏了同源策略，則瀏覽器的正常功能可能都會受到影響。html

能夠說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。java

同源策略，它是由Netscape提出的一個著名的安全策略。如今全部支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指， 域名，協議，端口相同。

當一個瀏覽器的兩個tab頁中分別打開來百度和谷歌的頁面當瀏覽器的百度tab頁執行一個腳本的時候會檢查這個腳本是屬於哪一個頁面的，即檢查是否同源，只有和百度同源的腳本纔會被執行。

若是非同源，那麼在請求數據時，瀏覽器會在控制檯中報一個異常，提示拒絕訪問。

同源

域名、協議、端口相同，也就是在同一個域裏。jquery

非同源受到的限制

cookie不能讀取（如我在本身的站點沒法讀取博客園用戶的cookie）
dom沒法得到
ajax請求不能發送

什麼是瀏覽器跨域

例如：面試

　　一個域的頁面去請求另外一個域的資源；ajax

　　A域的頁面去請求B域的資源。django

Jsonp實現跨域

JSONP的基本原理

動態添加一個<script>標籤，而script標籤的src屬性是沒有跨域的限制的。json

這樣一來,這種跨域方式就與ajax XmlHttpRequest協議無關了。跨域

JSONP即JSON with Padding瀏覽器

因爲同源策略的限制，XmlHttpRequest只容許請求當前源（域名、協議、端口）的資源。

若是要進行跨域請求，咱們能夠經過使用html的script標記來進行跨域請求，並在響應中返回要執行的script代碼，其中能夠直接使用JSON傳遞javascript對象,這種跨域的通信方式稱爲JSONP。

JSON 是一種數據格式

JSONP 是一種數據調用的方式

Jsonp的執行過程

首先在客戶端註冊一個callback (如:'TestJsonpCallback'), 而後把callback的名字(如:testjsonpcallback)傳給服務器。

注意：

　　服務端獲得callback的數值後，要用TestJsonpCallback(......)把將要輸出的json內容包括起來，此時，服務器生成 json 數據才能被客戶端正確接收。
　而後以 javascript 語法的方式，生成一個function， function 名字就是傳遞上來的參數 'callback'的值 TestJsonpCallback.

　　最後將 json 數據直接以入參的方式，放置到 function 中，這樣就生成了一段 js 語法的文檔，返回給客戶端。
客戶端瀏覽器，解析script標籤，並執行返回的 javascript 文檔，此時javascript文檔數據，做爲參數，傳入到了客戶端預先定義好的 callback 函數.

實例展現

訪問端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery.js"></script>

</head>
<body>
<h1>index</h1>

{#<button onclick="fasong">點擊發送</button>#}


<p>
    <input type="button" onclick="Jsonp1();" value='提交'/>
</p>


<p>
    <input type="button" onclick="Jsonp2();" value='提交'/>
</p>

<script>
    function Jsonp1() {
        var tag = document.createElement('script');
        tag.src = "http://127.0.0.1:8888/data/";
        document.head.appendChild(tag);
        {#document.head.removeChild(tag);#}

    }




    function Jsonp2() {
        $.ajax({
                url: "http://127.0.0.1:8888/data/",
                type: 'GET',
                dataType: 'JSONP',
                jsonp: 'callback',
                {#jsonpCallback: 'asdasdasd',#}
                success:function (data) {
                    console.log(data)
                }

            }
        )
    }
</script>
</body>
</html>

index.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'^jsonp/', views.index),
]

urls.py

from django.shortcuts import render

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

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

被訪問端

from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^data/', views.data),
]

urls.py

from django.shortcuts import render, HttpResponse


# Create your views here.
def data(request):
    callback = request.GET.get('callback')
    return HttpResponse('%s("數據")' % callback)

Views.py

用訪問端訪問目標主機,目標主機能成功返回 "函數名("參數")" , 表示成功跨域。

感謝：什麼是同源策略,什麼是跨域,如何跨域,Jsonp/CORS跨域