总结解决跨域的三种方法

方法1.通过PHP设置响应头允许跨域(CORS方式)
CORS(跨域资源共享,Cross-Origin Resource Sharing)定义一种跨域访问的机制,可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单,只需由服务器发送一个响应头即可
header(“Access-Control-Allow-Origin:*”); // 允许任何来源
header(“Access-Control-Allow-Origin:http://local.com”); //只允许来自域名http://local.com的请求
代码如下:
local.com域名文件:
在这里插入图片描述
请求其他域名native.com:
在这里插入图片描述
请求的结果:成功
在这里插入图片描述
方法2.使用php做代理去请求第三方api接口
php是可以跨域的,我们利用ajax请求本域名中的php文件,php再去请求第三方接口文件,从而达到跨域目的。
在这里插入图片描述
php做代理请求:
在这里插入图片描述
ajax请求本域名php代理文件:
在这里插入图片描述
请求结果:成功
在这里插入图片描述
将数据取出:
在这里插入图片描述
结果:
在这里插入图片描述
方法3.jsonp方法 只能get
浏览器只对XHR(XMLHttpRequest)请求有同源请求限制,而对script标签src属性、link标签ref属性和img标签src属性没有这这种限制,利用这个“漏洞”就可以很好的解决跨域请求。JSONP就是利用了script标签无同源限制的特点来实现的,当向第三方站点请求时,我们可以将此请求放在<script>标签的src属性里这就如同我们请求一个普通的JS脚本:
<script src="http://www.abc.com/index.php/?param1=1&callback=fnName"> </script>

JSONP实现跨域请求的原理简单的说,
就是动态创建<script>标签,然后利用<script>的src 不受同源策略约束来跨域获取数据。
JSONP 由两部分组成:
回调函数和数据。
回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。

本站并提供一个回调函数来接收数据(函数名可约定,或通过地址参数传递)。
第三方网站产生的响应为json数据的包装(故称之为jsonp,即json padding),形如:
callback({“name”:“fegnjie”,“age”:“18”}),这样本站浏览器会调用callback函数,并传递解析后json对象作为参数。
第1步:动态创建<script>标签,设置其src,回调函数在src中设置:
在这里插入图片描述
第2步:在页面中,返回的JSON作为参数传入回调函数中,我们通过回调函数来来操作数据。
在这里插入图片描述

了解了JSONP的基本使用方法,我们在实现上面通过ajax调用豆瓣接口的需求,实现代码如下:
在这里插入图片描述
在控制台,我们可以查看到返回的response数据格式为JSON对象格式的,具体需要取出哪些参数,可以根据自己的需要:
在这里插入图片描述

  • 3
    点赞
  • 40
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值