[toc] ### 1.什么是跨域 瀏覽器出于安全考慮，具有同源策略，當協議域名端口號有一個不同時就會出現跨域，數據請求就會被攔截 ### 2.如何解決跨域 #### 1.JSONP 原理： 1. 因為script標簽不會受到跨域限制，通過script標簽指向一個需要訪問的地址，并提供回調函數來接受數據來進行通信 2. 僅限于 get 請求，在工作中比如請求高德地圖cdn，和echarts就是這種方式 ```js <script src="http://domain/api?param1=a&param2=b&callback=jsonp"> </script> <script> function jsonp(data) { console.log(data) } </script> ``` 3. JSONP封裝 ```js export function jsonp(url) { if (!url) { console.error("Axios.JSONP 至少需要一個url參數!") return } return new Promise((resolve, reject) => { window.jsonCallBackJsonp = (result) => { resolve(result) } var JSONP = document.createElement("script") JSONP.type = "text/javascript" JSONP.src = `${url}&callback=jsonCallBackJsonp` document.getElementsByTagName("head")[0].appendChild(JSONP) setTimeout(() => { // document.getElementsByTagName("head")[0].removeChild(JSONP) }, 500) }) } ``` #### 2.vue.config.js 中的 proxy 代理 原理: ``` 1.將域名發送給本地服務器 localhost:8080 2.再由本地服務器去請求真正的服務器 3.因為請求是從服務端發出的，所以就不存在跨域的問題 ``` 配置： ```js module.exports = { devServer: { // 跨域 proxy: { '/api': { // 表示攔截以/api開頭的請求路徑 // 目標路徑 target: 'http://www.bilibili.com/', // 允許跨域 changeOrigin: true, // 重寫路徑以 /api 開頭的為 '' pathRewrite: { '^/api': '' } } } } } axios.get('api/getList').then(res => {}) ``` #### 3.cors 需要后端配置 Access-Control-Allow-Origin，或者使用一個cors插件 #### 4.postMessage postMessage是用于嵌入頁面的第三方頁面數據，比如說iframe，一個頁面發送消息，另一個頁面判斷并接收消息 + 一個頁面通過postMessage發送message到指定的url + 另一個頁面 new一個MessageChannel對象，并且監聽這個對象，當它的origin等于目標url時，執行相應的動作 ```js // 發送消息端 window.parent.postMessage('message', 'http://test.com'); // 接收消息端 var mc = new MessageChannel(); mc.addEventListener('message', (event) => { var origin = event.origin || event.originalEvent.origin; if (origin === 'http://test.com') { console.log('驗證通過') } }); ```