跨域产生的原因
首先跨越的产生， 是因为处于信息安全的考虑，浏览器采用了“同源策略”。
只有在以下三者皆相同的情况下，才称之为同源：
- 协议 如: http 和 https 即协议不同
- 域名 如: google.com 和 bing.com 即域名不同
- 端口 如: 80 和 :8080 即端口不同
如果不同源的化，则相互之间不能进行：
- Cookie、LocalStorage 和 IndexDB 的访问
- DOM 的获取
- AJAX 请求
客户端和非同源的服务器之间，跨越问题的解决
方法1. 跨域是浏览器设置的限定；通过让与浏览器同源的服务器进行请求的代理, 可以访问非同源服务器；
方法2. 服务器设置 CORS , 即服务器通过设置请求头的 Access-Control-Allow-Origin 属性，通知浏览器关闭对当前页面的屏蔽屏蔽；允许数据的请求；
方法3. JSONP 方法， 同源政策没有禁止 src 属性访问外部非同源的地址，那么通过一个 src 地址即可发送一个 Get 请求。具体操作的案例如下
前端
<!-- 响应之后的回调 -->
<script>
function cb(data) {
// 数据处理
console.log(data)
}
// 通过动态生成的方式， 生成如下标签
// 通过 src 发送 Get 请求, 将回调函数作为地址参数
function getData() {
var script = document.createElement('script');
var url = `/api/get-data?callback=cb`;
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
// <script src="/api/get-data?callback=cb></script>
// 测试请求数据
getData()
</script>
后端配合
http.get('/api/get-data', (req, res) => {
let cb = req.query.callback
let response = {
code: 200,
mag: '请求成功',
data: 'data ato response'
}
// 将响应数据和回调函数拼接成字符串，返回前端
res.send(`cb(${JSON.stringify(response)})`)
})
