在瀏覽器請求中，出現跨域訪問資源的問題，我們肯定會遇到。如果跨域請求被阻止，有可能導致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(.*
)$ }
// 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編...
跨域請求解決方案
在前端開發過程中，難免和服務端產生資料互動。一般情況我們的請求分為這麼幾種情況 只關注傳送，不關注接收 不僅要傳送，還要關注服務端返回的資訊 上面提到了乙個概念，我們這裡簡單做一下講解。什麼叫做跨域？一般情況下，跨域分為三種情況 跨協議 跨子域 跨網域名稱。下面距離梳理一下這三種情況。我們需要知道的...