CORS跨域限制與解除

2021-10-23 13:02:30 字數 2611 閱讀 2673

cors(跨域資源共享)是一種機制,它使用額外的 http 頭來告訴瀏覽器 讓執行在乙個 origin (domain) 上的web應用被准許訪問來自不同源伺服器上的指定的資源。

發起請求的域與請求指向的域所在的資源不一樣,就形成了跨域。

域資源常常包括 協議、網域名稱(ip)、埠號,若均相同,就是同域,若乙個不相同,則是跨域。

標籤

我們模擬乙個跨域的請求,乙個是8888,乙個是8887

);然後分別啟動這兩個服務

/html>html裡面傳送了乙個8887的get請求,在server 8888埠裡面讀取了html的內容並傳送8887的請求,就製造了乙個跨域請求

請求以後,控制台提示,no 『access-control-allow-origin』 ,『access-control-allow-origin』 是什麼呢?就是服務端允許跨域的頭,要怎麼設定才能讓這個跨域請求生效呢?

);在server2.js裡面設定這個請求頭,再從8888裡面請求,發現8888裡面會開始請求8887,並且沒有報錯了,這個*是代表所有的**都可以跨域請求8887,我們可以限制網域名稱,比如』access-control-allow-origin』: 『http://localhost:8888』,這裡只能設定乙個值,不能設定多個,那麼想設定多個怎麼辦呢?可以設定乙個值,動態的去判斷

這就是符合期望的跨域狀態,這裡就有乙個概念,我們就這麼乙個操作,就可以使這個跨域請求讓server2接受,其實不管server2有沒有接受這個請求,8888都會去傳送這個8887的請求,只是沒看到這個頭,會把請求返回內容給忽略掉,在curl並沒有這樣的限制,這是瀏覽器跨域的限制

是否只有通過這種方式實現跨域呢,顯然不是,因為我們知道json這樣乙個實現方法,那jsonp到底做了什麼呢?我們來看一下,8888埠的內容不變

);server2裡面去除掉access-control-allow-origin,test.html請求的方式改掉

<

!--test.html--

>

"">

<

/script>

<

/body>

再重啟8887服務,發現請求使正常傳送,也是正常返回的,這是因為,瀏覽器允許js的跨域請求,他並不在乎跨域的頭,所以可以在script裡面的**是一段可執行的js**,然後去呼叫jsonp,在發起請求之前,他給我們設定的一些內容,這樣就可以達到目的,這就是json的原理,利用了link,script標籤的可跨域性

CORS跨域請求的限制與解決

呼叫xmlhttprequest或fetchapi通過跨站點方式訪問資源 網路字型,例如bootstrap 通過css使用 font face 跨域呼叫字型 同源策略 是指協議,網域名稱,埠都要相同,其中有乙個不同都會產生跨域 現在a 的頁面想去訪問b 的資訊,a 頁面的 如下 這裡使用jquery...

CORS跨域原理

請求 響應 access control allow credentials true access control allow origin 預撿請求 request method options accept language zh cn,en q 0.8,zh q 0.6 access con...

CORS跨域請求

瀏覽器的同源策略會導致跨域,這裡同源策略又分為以下兩種 只要協議 網域名稱 埠有任何乙個不同,都被當作是不同的域,之間的請求就是跨域操作。在同源策略下會禁止跨域,實際上跨域請求時,請求會向伺服器發出,伺服器也會進行響應,但是當收到返回的資料時發現跨域所以忽略了返回的內容並報錯。當請求同時滿足下面兩個...