浏览器跨域问题的几种解决方案

浏览器跨域问题的集中解决方案

跨域问题的原因是浏览器同源策略的限制。
同源策略限制从一个源加载的文档或脚本与来之另一个源的资源进行交互，这是一个用于隔离潜在恶意文件的安全机制。

一个源的定义：如果协议、端口（如果指定了一个）和域名对于两个页面是相同的，则两个页面具有相同的源。

通常解决跨域问题有以下几种方法
1.jsonp
2.cors
3.降域
4.postmessage

jsonp

原理

首先利用动态添加script标签，定制src属性来实现跨域。
通过前端方法作为参数船体到服务器端，然后由服务器端渗入参数后返回实现服务器端向客户端通信
由于使用script标签的src属性，因此之支持get的方法

jsonp简单实现

一个简单的jsonp实现，其实就是拼接url，然后动态添加一个script元素刀头部

function jsonp(req) {
  var script = document.createElement('script')
  var url = req.url + '?callback=' + req.callback.name
  script.src = url
  document.getElementsByTagName('head')[0].appendChild(script)
}

// 调用代码
function hello(res) {
  console.log('hello ' + res.data)
}

jsonp({
  url: "",