什么是跨域
首先说一下同源：同源就是规定多个web资源的url中的scheme（协议）、hostname(域名）、port（端口）、必须相同，
只要有一项不同那么这个web资源就是不同源 的。
当请求地址与源页面地址不同源时，就产生跨域现象。
同源策略就是规定了javascript可以操作那些web内容的一个完整的安全限制。
同源策略限制的内容有：
- cookie LocalStorage IndexDB
- dom 节点
- ajax请求
跨域加载标签 src href属性都可以跨域加载资源。
解决方案：
jsonp
jsonp
原理：
- script元素可以作为一种Ajax传输协议
- 利用srcript标签不受同源策略限制，网页可以从其他源获取json数据（服务器支持才可以）
- 只需设置script元素的src属性并且插入到DOM中，浏览器就会发出一个HTTP请求到src属性指向所指向的URL
- script 元素会自动下载并执行下载的数据
- 使用这种script元素进行ajax数据传输的技术就叫做jsonp，也就是JSON-Padding
服务器会返回一个这样的相应
// functionName(["baidu", "tencent", "alibaba"])
以前就知道利用src属性不受同源策略影响，现在直接贴代码一目了然
优缺点
优点：简单兼容性好
缺点：只支持get方式，不安全，可能遭受xss攻击
这次终于搞懂jsonp的实现形式了
后端代码使用及其简单 node - express
let express = require(''express)
let app = express()
app.get('/say', function(req, res){
let { callback } = req.query
// 向前端发送js代码，让前端直接执行掉
res.end(`${callback}('me too')`)
})
app.listen(3000)
前端代码
前端项目中直接打开或者使用live-server启动一个服务，目的就是前后端不同源，以便使用jsonp实现跨域获取数据
function jsonp({url, callback})
return new Promise((resolve, reject) => {
window[callback] = functioin(data) {
resolve(data)
}
script.src = url + '?callback' + '=' callback
document.body.appendChild(script)
})
// jsonp成功实现跨域
jsonp({
url: 'http://localhost:3000/say'
callback: 'show'
}).then(data => {
console.log(data) // me too 拿到数据
})
