jsliang 求職系列 17 跨域

不折騰的前端，和鹹魚有什麼區別目錄

一 目錄

二 前言

三 同源策略

四 實現跨域的方式

4.1 jsonp

4.2 cors

4.3 postmessage

4.4 websocket

4.5 node

4.6 nginx

4.7 其他方式

五 參考文獻

帶著問題學習：

什麼是同源策略？

所謂源，可以指 url。

簡單來看某個 url 組成；

在這裡：

名稱舉例

協議http、https

網域名稱github.com、jsliang.top

埠80、443

其中，如果 url 上未標明埠，那麼http預設是80埠，https預設是443埠。

對於下面的 url，我們判斷下哪些屬於同源哪些屬於不同源：

url是否同源

原因否協議不同

否網域名稱不同

否https預設埠為443

是多級網域名稱和主網域名稱一致

那麼，出於怎樣的考慮，瀏覽器才要設定跨域？

首先，跨域只存在於瀏覽器端，因為我們知道瀏覽器的形態是很開放的，所以我們需要對它有所限制。

其次，同源策略主要是為了保證使用者資訊的安全，可分為兩種：ajax同源策略和dom同源策略。

ajax同源策略主要是使得不同源的頁面不能獲取cookie且不能發起ajax請求，這樣在一定層度上防止了csrf攻擊。

dom同源策略也一樣，它限制了不同源頁面不能獲取dom，這樣可以防止一些惡意**在自己的**中利用iframe嵌入正規的**並迷惑使用者，以此來達到竊取使用者資訊。

實際開發場景為什麼會出現跨域：

前後端部署的機子，不屬於同一臺雲伺服器。

同一臺雲伺服器，但是你在請求的是上的資源。

那麼，如何解決跨域問題呢？

使用**（proxy）

設定cors

jsonp

……等下面我們詳細看看解決跨域的幾個方案。

利用標籤沒有跨域限制的漏洞，網頁可以得到從其他**動態產生的json資料。jsonp請求一定需要對方的伺服器做支援才可以。

優缺點：

【優點】ajax和jsonp都是客戶端向服務端傳送請求，從而獲取資料的方式。但是ajax屬於同源策略，而jsonp屬於非同源策略。

【優點】相容性好，能解決主流瀏覽器跨域訪問的問題。

【缺點】僅支援get請求

【缺點】不安全，可能會遭受xss攻擊。

實現過程：省略，看 js 手寫**部分。

cors 跨域的原理。

跨域資源共享（cors）是一種機制，是w3c標準。它允許瀏覽器向跨源伺服器，發出xmlhttprequest或fetch請求。並且整個cors通訊過程都是瀏覽器自動完成的，不需要使用者參與。

而使用這種跨域資源共享的前提是，瀏覽器必須支援這個功能，並且伺服器端也必須同意這種 "跨域" 請求。因此實現 cors 的關鍵是伺服器需要伺服器。

瀏覽器會自動進行cors通訊，實現cors通訊的關鍵是後端。只要後端實現了cors，就實現了跨域。

服務端設定access-control-allow-origin就可以開啟cors。

該屬性表示哪些網域名稱可以訪問資源，如果設定萬用字元則表示所有**都可以訪問資源。

cors的請求分為兩種：

乙個簡單請求大致如下。

http 方法是下列之一：

http 頭資訊不超過以下幾種字段

任何不滿足上述要求的請求，都是複雜請求。

乙個複雜請求不僅包含通訊內容的請求，同時也包含預請求。

簡單請求和複雜請求的區別：

postmessage是html5 xmlhttprequest level 2中的api，且是為數不多可以跨域操作的window屬性之一。

它可用於解決以下方面的問題：

postmessage()方法允許來自不同源的指令碼採用非同步方式進行有限的通訊，可以實現跨文字檔、多視窗、跨域訊息傳遞。

websocket是 html5 的乙個持久化的協議，它實現了瀏覽器與伺服器的全雙工通訊，同時也是跨域的一種解決方案。

websocket是一種雙向通訊協議，在建立連線之後，websocket的server與client都能主動向對方傳送或接收資料。

websocket的使用我們在計算機網路部分有寫，後面再進行介紹。

同源策略是瀏覽器需要遵循的標準，而如果是伺服器向伺服器請求就無需遵循同源策略。

所以我們可以通過node中介軟體**（兩次跨域）：

使用nginx反向**實現跨域，是最簡單的跨域方式。

只需要修改nginx的配置即可解決跨域問題，支援所有瀏覽器，支援session，不需要修改任何**，並且不會影響伺服器效能。

其他方式還有：

window.name + iframe

location.hash + iframe

document.domain + iframe

但是感覺有生之年jsliang不會用到，這裡看看即可。

jsliang 的文件庫由 梁峻榮 採用 知識共享 署名-非商業性使用-相同方式共享 4.0 國際 許可協議 進行許可。

基於 /liangjunrong/document-library 上的作品創作。

本許可協議授權之外的使用許可權可以從 處獲得。

17 解決Ajax中文亂碼與跨域訪問

ajax中文亂碼問題的解決方法有兩種 1 頁面端資料作一次encodeuri,伺服器端稍作改變即可 麵麵端verify.js指令碼 伺服器端的程式稍作修改即可,對字串用指定方式編碼 2 解決中文亂碼問題 頁面端發出的資料作兩次encodeuri,伺服器作一urldecoder.decode old,...

實戰系列 Spring Boot跨域解決方案

在實際工作開發中經常會遇到跨域請求，這個時候就需要前後端來共同協調來解決問題，那麼在spring boot中怎麼解決跨域請求問題呢？下面就來看看 為了保證瀏覽器的安全，不同源位址的客戶端指令碼在沒有經過明確授權的情況下是不能讀寫彼此的資源的，這個就是叫做同源策略，同源策略是瀏覽器安全問題的基石。如果...

系列教程之使用Axios跨域請求問題

使用 npm npm install axios 或者 使用 bower bower install axios 或者直接使用 cdn main.js import axios from axios 將axios全域性掛載到vue原型上 axios 使用this.axios.post url,vue...