JSONP的跨域方式
是JSON的一种模式，html中script标签可以引入其他域下的js，比如引入线上的jquery库。利用这个特性，可实现跨域访问接口
需要后端支持
服务器愿意提供接口
数据返回前需要提前定义好数据处理函数
创建script标签，src的地址执行后端接口，最后加个参数callback=数据处理函数名这个参数可以让返回的数据以数据处理函数名(data)的字符串形式输出，以此调用数据处理函数
例子
script部分
document.querySelector(对象).addEventListnner('操作',function(){
var script=document.createElement('script')//创建一个元素
script.src='路径?callback=数据处理函数'//设定地址
})
function 数据处理函数(){}
router.js部分
app.get('路径',function(req,res){
var 返回数据=[xx]
var cb = req.query.callback;
if(cb){
res.send(cb + '('+ JSON.stringify(返回数据) + ')');
}else{
res.send(返回数据);
}
})
CORS的跨域请求方式
是AJAX的一种跨域请求方式，使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头Access-Control-Allow-Origin 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。
res.header('Access-Control-Allow-Origin','(此处输入同意对象的URL)')
例子
script部分
ducument.querySelector(对象).addEventListnner('操作',function(){
var xhr=new XMLHttpRequest()
xhr.open('get','路径',true)
xhr.send()
xhr.onreadystatechange =function(){
if(xhr.readyState ===4 && xhr.status===200){
appendHtml(JSON.parse(xhr.responseText))
}
}
})
function appendHtml(){}
router.js部分
app.get('路径',function(req,res){
var 返回数据=[xx]
res.header('Access-Control-Allow-Origin','(此处输入同意对象的URL)') //也可输入'*'，表示同意所有
res.send(返回数据)
})
使用降域进行跨域
操作iframe
window.frames[0].document.querySelector('input').value='xxx'获取iframe里面的输入框后对其赋值，当子域名不同时不能进行操作，因此需要进行降域
document.domain=''降到相同的父域名，且主域名必须相同
例子
script部分
页面a
document.querySelector('input').addEventListener('input',function(){//选中页面a的input进行绑定操作
window.frames[0].document.querySelector('input').value=this.value//对iframe（即页面b）里的input属性进行赋值
})
document.domain='同一二级域名或主域名'//重要部分修改域名
页面b
document.querySelector('input').addEventListener('input',function(){//选中页面b的input进行绑定操作
window.parent.document.querySelector('input').value=this.value//对window父对象中的Input进行赋值
})
document.domain='同一二级域名或主域名'//重要部分修改域名
