共计 1350 个字符，预计需要花费 4 分钟才能阅读完成。
同源策略
概念：
同源策略是浏览器的一个平安性能，不同源的网页脚本在没有明确受权的状况下，不能读写对方资源，所谓同源是指 "协定 + 域名 + 端口" 三者雷同。跨域
概念：
应用 AJAX 技术（XMLHttpRequest 对象），从一个网页去申请另一个网页资源时，违反浏览器同源策略限度，引起的平安问题，称为跨域。①域名：
主域名不同 http://www.baidu.com/index.html –>http://www.sina.com/test.js
子域名不同 http://www.666.baidu.com/inde… –>http://www.555.baidu.com/test.js
域名和 IP 地址 http://www.baidu.com/index.html –>http://180.149.132.47/test.js
②端口：
http://www.baidu.com:8080/ind…–> http://www.baidu.com:8081/tes…
③协定：
http://www.baidu.com:8080/ind…–> https://www.baidu.com:8080/te…
备注：
localhost 和 127.0.0.1 尽管都指向本机，但也属于跨域
解决方案
①JSONP 技术
利用 HTML 的 <script> 标签天生能够跨域这一特点，用其加载另一个域的 JSON 数据，加载实现后会主动运行一个回调函数告诉调用者。此过程须要另一个域的服务端反对，所以这种形式实现的跨域并不是任意的。前端培训
该协定的一个要点就是容许用户传递一个 callback 参数给服务端，而后服务端返回数据时会将这个 callback 参数作为函数名来包裹住 JSON 数据，这样客户端就能够随便定制本人的函数来主动解决返回数据了。
弊病 : JSONP 仅仅用于 get 申请。
<body>
<button class="button"> 获取数据 </button>
<script>
let btnEle = document.querySelector('.button')
btnEle.addEventListener('click', function () {getUserList('http://localhost:8088/api/list')
})
function getUserList(url) {const scriptEle = document.createElement('script')
scriptEle.setAttribute('src', url)
document.body.appendChild(scriptEle)
}
function callback(result) {console.log(result)
}
</script></body>
②跨域资源共享 CORS
CORS 是一个 W3C 规范，全称是 "跨域资源共享"（Cross-origin resource）。它容许浏览器向跨源服务器，收回 XMLHttpRequest 申请，从而克服了 AJAX 只能同源应用 sharing 的限度。response.setHeader(‘Access-Control-Allow-Origin’, ‘*’)
③代理服务器技术
vue3 为例配置 vue.config.js