「这是我参与2022首次更文挑战的第11天，活动详情查看：2022首次更文挑战」
什么是跨域
简单的来说，从一个源加载的文档或者脚本到另一个源获取资源或者交互。
同源策略
同源策略是一个重要的安全策略，它用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。简单点来说，就是域名、协议、端口号这三个只要有一个不同，他就不属于同源，两个之间获取资源或者交互就属于跨域。
常见的跨域场景
| 地址 | 原因 | 结果 |
|---|---|---|
| www.example.com/a.js | 域名相同，文件名不同 | 同源 |
| www.example.com/b.js | 域名相同，文件名不同 | 同源 |
| www.example.com:10220/a.js | 端口号不同 | 不同源 |
| www.example.com/b.js | 端口号不同 | 不同源 |
| www.example.com/a.js | 协议不同 | 不同源 |
| www.example.com/b.js | 协议不同 | 不同源 |
| www.example.com/a.js | 域名不同 | 不同源 |
| www.chestnut.com/b.js | 域名号不同 | 不同源 |
跨域的解决问题
- JSONP JSONP是通过动态的插入script元素,向服务器发起请求JSONP数据，服务器收到请求后，会将数据放在一个我们原先命名好的回调函数里返回来，在回调函数里，可以尽情的处理返回的数据。
let script = doucment.createElement('script');
script.src = "http://example.com/ip?callback=handleData";
document.body.appendChild(script);
function handleData(data) {
console.log(data.ip)
}
上面代码所示，动态创建一个script标签，再把目标地址写入script标签的src属性，利用src可以不受限制地从其他域获取数据的特点，把想要的数据取到；在目标地址里先设定一个handleData回调函数，当服务器响应浏览器发出的请求后，把我们需要的数据返回来，我们利用handleData回调函数来接收返回的数据，并且可以在这里随心所欲的处理这些数据。
- 配置本地代理 我们可以在本地通过node启动一个微型服务，让服务端代替我们去向我们想要的目标地址发起请求，不够，这种只能够在本地开发期间使用，到了要部署线上环境时，还是需要使用nginx代理。
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://example.com/',
changeOrigin: true,
'^/api': ''
}
}
}
}
