[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('验证通过') } }); ```