同源策略
概念：

    同源策略是浏览器的一个平安性能，不同源的网页脚本在没有明确受权的状况下，不能读写对方资源，所谓同源是指"协定+域名+端口"三者雷同。

跨域
概念：

    应用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