在瀏覽器請求中,出現跨域訪問資源的問題,我們肯定會遇到。如果跨域請求被阻止,有可能導致css、js 、ajax請求、font字型等資源出現無法正常訪問的問題。
同源策略
為什麼要跨域?
前端跨域解決方案?
四、nodejs中介軟體**
五、vue 跨域
六、websocket協議
跨域是指乙個域下的文件或者指令碼試圖去請求另乙個域下的資源。
也就是說:當前發起請求的域和該請求指向的資源所在的域不一致。
具體表現在協議、網域名稱、埠號——均一致則為同域,有乙個不同就是跨域。
廣義的跨域
資源嵌入:、
、
等dom操作標籤;
js 發起的ajax
請求、dom 和 js 物件的跨域操作等;
狹義的跨域
瀏覽器同源策略限制
同源策略/sop(same origin policy)是一種約定,由netscape公司2023年引入瀏覽器,它是瀏覽器最核心也最基本的安全功能,如果缺少了同源策略,瀏覽器很容易受到xss、csfr等攻擊。所謂同源是指"協議+網域名稱+埠"三者相同,即便兩個不同的網域名稱指向同乙個ip位址,也非同源。同源策略限制:
cookie
、localstorage
和indexdb
無法讀取
dom
和js
物件無法獲取
ajax
請求不能傳送
注意:如果是協議和埠造成的跨域問題「前台」是無能為力的;
在跨域問題上,域僅僅是通過「url的首部」來識別而不會去嘗試判斷相同的ip位址對應著兩個域或兩個域是否在同乙個ip上。
在前端開發過程中,經常會遇到需要呼叫第三方服務介面的情況;
現在的專案大多採用前後端分離的模式,前端後端的網域名稱不一致,因此需要解決跨域問題。
普通跨域請求:只服務端設定access-control-allow-origin
即可,前端無須設定,若要帶cookie請求:前後端都需要設定。
需注意的是:由於同源策略的限制,所讀取的cookie為跨域請求介面所在域的cookie,而非當前頁。
目前,所有瀏覽器都支援該功能(ie8+:ie8/9需要使用xdomainrequest物件來支援cors)),cors也已經成為主流的跨域解決方案。
配置**分為正向**和反向**兩種形式。# 配置 cors 跨域
header
("access-control-allow-origin:*");
header
("access-control-request-methods:get, post, put, delete, options");
header
('access-control-allow-headers:x-requested-with,content-type,test-token,test-sessid'
);
正向**
反向**
伺服器配置檔案
server
location =
/pxx
# location
=> 位址列資訊;
: 給瀏覽器看的 , 讓瀏覽器知道用什麼樣的方式去進行請求的傳送,響應的接受;
# localhost : 給瀏覽器看的,
讓瀏覽器可以向對應的ip位址
(目標)發起請求;
# /php/day26/***.html 伺服器查詢語句;
# 在nginx之中由 location 來進行捕獲並處理;
//localhost : 預設就是傳遞乙個 / 給伺服器;
# file:
///d:/phpstudy_pro/www/index.html
# 重要 : 如果更改了配置檔案,那麼必須重啟伺服器;
location /
# .php字尾的內容需要用php解析;
# /\.
php(.*
)$/ 正則
location ~ \.
php(.*
)$ }
node中介軟體實現跨域**,原理大致與nginx相同,都是通過啟乙個**伺服器,實現資料的**
// 1. 找到nginx伺服器配置檔案;
// 2. 進行**配置;
var options =
, datatype :
"json"
, data :
}ajax
(options)
<
/script>
使用 node + express + http-proxy-middleware 搭建乙個proxy伺服器。
;// 前端開關,瀏覽器是否讀寫cookie
xhr.withcredentials =
true
;// 訪問http-proxy-middleware**服務爨
// 修改響應資訊中的cookie網域名稱
cookiedomainrewrite:
'www.domain1.com'
//可以為false,表示不修改})
);listen
(3000);
console.
log(
'proxy server is listen at port 3000...'
);這裡以使用 vue-cli 腳手架生成的標準專案為準。一般在專案根目錄下有 vue.config.js 檔案
配置一下module.exports =}}
}}
axios.defaults.baseurl = '/api』
這樣就可以保證動態的匹配生產和開發環境的定義字首,**如下:
重新啟動專案,解決跨域問題// mock伺服器
axios.defaults.baseurl =
'/api'
;
web sockets是一種瀏覽器的api,它的目標是在乙個單獨的持久連線上提供全雙工、雙向通訊。(同源策略對web sockets不適用)
web sockets原理:在js建立了web socket之後,會有乙個http請求傳送到瀏覽器以發起連線。取得伺服器響應後,建立的連線會使用http公升級從http協議交換為web sockt協議。
只有在支援web socket協議的伺服器上才能正常工作。
瀏覽器跨域解決方案
今天介紹乙個實用的瀏覽器跨域方案。比如 a 嵌入了 b 的頁面,這時 b 的頁面想要呼叫 a 的頁面的方法,因為網域名稱不同,由於瀏覽器同源策略的限制會被 blocked 掉的。以下給出乙個方法 在 a 的寫下 window.addeventlistener message function obj...
跨域請求解決方案
1.什麼叫js跨域請求 js跨域是指通過js在不同的域之間進行資料傳輸或通訊,比如用ajax向乙個不同的域請求資料,或者通過js獲取頁面中不同域的框架中 iframe 的資料。什麼是不同的域 只要協議 網域名稱 埠有任何乙個不同,都被當作是不同的域。2.下面貼上一段請求 這用的是angularjs編...
跨域請求解決方案
在前端開發過程中,難免和服務端產生資料互動。一般情況我們的請求分為這麼幾種情況 只關注傳送,不關注接收 不僅要傳送,還要關注服務端返回的資訊 上面提到了乙個概念,我們這裡簡單做一下講解。什麼叫做跨域?一般情況下,跨域分為三種情況 跨協議 跨子域 跨網域名稱。下面距離梳理一下這三種情況。我們需要知道的...