您的位置：首页 > Web前端

json解决前端跨域的问题

2019-03-19 20:31 106 查看

一、前言

  • 初识

XMLHttpRequest cannot load xxxx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'xxxx' is therefore not allowed access. The response had HTTP status code 404.

timg.jpg

  • 什么跨域？
    简述：由于浏览器XMLHttpRequest同源策略（域名、端口、协议必须全一致）影响，禁止使用XHR对象向不同源服务器发起HTTP请求。
  • 为啥禁止跨域？
    简述：AJAX（XMLHttpRequest）同源策略主要用来防止CSRF攻击。我们发起的每一次HTTP请求都会带上请求地址对应的cookie，简单来说就是“模仿用户”访问“目标网站”。
  • 如何解决跨域？
    简述：解决跨域问题的方案有很多，例如JSONP、CROS、反向代理等等。
  • 今天我们就一起学习下，JSONP跨域解决方案的具体原理，以及实现封装一个自己的jsonp.js。

二、JSONP

大家都知道页面中，图片（img）是可引用外部的，js脚本文件（script）也可引入外部的，所以基本原理就是通过动态创建script标签,然后利用src属性进行跨域。

1. 基本原理

[code]<body>
<script>
function fn1(str) { alert('我是fn1:'+ str) }
</script>
<script>
fn1('下面调用')
</script>
</body>

总结：上面代码想必大家都知道结果吧。会弹出“我是fn1:下面调用”

2. 百度搜索api简单使用

百度搜索的接口： 

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=abc&cb=show

[code]<script>
function fn1(url){
window.show = function(json){
console.log(json);
}
var oS = document.createElement('script');
oS.src = url;
document.head.appendChild(oS);
}

fn1('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=abc&cb=show');
</script>

结果如下图所示


总结：从上图我们可以看出“abc”关键字的搜索结果可以展示了。也就是解决了跨域问题。

 

遗留问题：

    • 创建的script标签，用完是不是需要删除？
    • 关键字（此处搜索内容）是不是可以灵活进行自定义？
    • 等等

JSONP方法完善以及封装

[code]function json2url(json){
var arr = [];
for(var name in json){
arr.push(name+'='+json[name]);
}
return arr.join('&');
}
/*
** @jsonp               jsonp跨域交互
** @params
**                      [object]
*/
function jsonp(json){
//参数初始值
json = json||{};
if(!json.url)return;
//回调名字
json.cbName = json.cbName||'cb';
//超时时间(ms)
json.timeout =json.timeout||15000;
//提交数据
json.data = json.data||{};
//回调函数的名字(解决了缓存问题)
json.data[json.cbName] = 'show'+Math.random();
//把回调函数名字中的.去掉。
json.data[json.cbName] = json.data[json.cbName].replace('.','');
//网络超时
json.timer = setTimeout(function(){
window[json.data[json.cbName]] = function(){
oHead.removeChild(oS);
json.error&&json.error('亲，网络不给力');
};
},json.timeout);
//定义回调函数(全局的)
window[json.data[json.cbName]] = function(result){
//把网络超时干掉
clearTimeout(json.timer);
//需要把script删除
oHead.removeChild(oS);
//执行成功回调函数
json.success&&json.success(result);
};
//获取head标签。
var oHead = document.getElementsByTagName('head')[0];
//动态创建script
var oS = document.createElement('script');
//给script加src
oS.src = json.url+'?'+json2url(json.data);
//把script插入到head标签中
oHead.appendChild(oS);
}

 

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航