同源策略
概念：
同源策略是浏览器的一个安全功能，不同源的网页脚本在没有明确授权的情况下，不能读写对方资源，所谓同源是指"协议+域名+端口"三者相同。
跨域
概念：
使用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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。