目錄
什么是跨域
什么是同源策略
解決方式
1、jsonp
1.1）去創建一個 script 標簽
1.2）script 的 src 屬性設定介面地址
1.3）介面引數,必須要帶一個自定義函式名 要不然后臺無法回傳資料，
1.4）通過定義函式名去接收后臺回傳資料
2、 CORS：跨域資源共享
2.1）跨域請求后的回應頭中需要設定
2.2）Access-Control-Allow-Origin 為發起請求的主機地址
2.3）Access-Control-Allow-Credentials，當它被設定為 true 時，允許跨域
2.4）Access-Control-Allow-Headers，設定跨域請求允許的請求頭
2.5）Access-Control-Allow-Methods，設定跨域請求允許的請求方式
3、反向代理
3.1)使用 vue-cli 腳手架搭建專案時 proxyTable 解決跨域問題
4、window+iframe
什么是跨域
指的是瀏覽器不能執行其他網站的腳本，它是由瀏覽器的同源策略造成的,是瀏覽器對
javascript 施加的安全限制，防止他人惡意攻擊網站.
比如一個黑客,他利用 iframe 把真正的銀行登錄頁面嵌到他的頁面上,當你使用真實的用戶
名和密碼登錄時,如果沒有同源限制,他的頁面就可以通過 JavaScript 讀取到你的表單中輸
入的內容,這樣用戶名和密碼就輕松到手了，
什么是同源策略
同源策略
是客戶端腳本（尤其是 Javascript）的重要的安全度量標準，它最早出自 Netscape
Navigator2.0，其目的是防止某個檔案或腳本從多個不同源裝載，所謂同源指的是：協議，
域名，埠相同，同源策略是一種安全協議，指一段腳本只能讀取來自同一來源的視窗和
檔案的屬性
解決方式
1、jsonp
1.1）去創建一個 script 標簽
1.2）script 的 src 屬性設定介面地址
1.3）介面引數,必須要帶一個自定義函式名 要不然后臺無法回傳資料，
1.4）通過定義函式名去接收后臺回傳資料
//去創建一個 script 標簽
var script = document.createElement("script");
//script 的 src 屬性設定介面地址 并帶一個 callback 回呼函式名稱
script.src = "HTTP://127.0.0.1:8888/index.php?callback=jsonpCallback";
//插入到頁面
document.head.appendChild(script);
//通過定義函式名去接收后臺回傳資料
function jsonpCallback(data){
//注意 jsonp 回傳的資料是 json 物件可以直接使用 //Ajax 取得資料是 json 字串需要轉換成 json 物件才可以使用，
}2、 CORS：跨域資源共享
原理：服務器設定 Access-Control-Allow-OriginHTTP 回應頭之后，瀏覽器將會允許跨域請
求
限制：瀏覽器需要支持 HTML5，可以支持 POST，PUT 等方法兼容 ie9 以上
需要后臺設定
2.1）跨域請求后的回應頭中需要設定
2.2）Access-Control-Allow-Origin 為發起請求的主機地址
2.3）Access-Control-Allow-Credentials，當它被設定為 true 時，允許跨域
帶 cookie，但此時 Access-Control- Allow-Origin 不能為通配符*
2.4）Access-Control-Allow-Headers，設定跨域請求允許的請求頭
2.5）Access-Control-Allow-Methods，設定跨域請求允許的請求方式
Access-Control-Allow-Origin: * //允許所有域名訪問，或者
Access-Control-Allow-Origin: HTTP://a.com //只允許所有域名訪問3、反向代理
3.1)使用 vue-cli 腳手架搭建專案時 proxyTable 解決跨域問題
打開 config/index.js,在 proxyTable 中添寫如下代碼：
proxyTable: { '/api': { //使用"/api"來代替"http://f.apiplus.c"
target: 'http://f.apiplus.cn', //源地址
changeOrigin: true,
//改變源
pathRewrite: { '^/api': 'http://f.apiplus.cn' //路徑重寫 }4、window+iframe
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/292517.html
標籤：其他