跨域方式实现原理之-jsonp

什么是跨域
首先说一下同源：同源就是规定多个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 拿到数据
   })