浅析JS中的跨域请求-图解加实例(JSONP篇)

wua_wua2012 发布于2019-08-19 18:00 / 403人阅读

摘要：党我们使用去获得异源的数据时，就会造成跨域请求。总结是很常见的处理跨域的方法，但是这种方式只能是类型的请求并且需要服务器配合，这样才能完成跨域，但是它的优点就是实现比较简单并且对低版本浏览器支持都很好。

何为跨域

简单来说就是js与异源页面进行通信，正常情况不允许js进行跨域通信的原因是其同源策略。

JSONP

党我们使用XHR去获得异源的数据时，就会造成跨域请求。JSONP(JSON Padding)即填充式JSON可以来解决这样的问题。

实现原理：虽然我们不能直接请求异源上的资源，但是在js中如img，script标签却是可以得到其他服务器上的资源的，那么我们就可以通过这样的方式将一段js代码间接地从外部引入。通过script标签向目标源发起一个GET请求，服务器根据请求的参数返回包含js的代码，请看下图：

//本地代码

//服务器上的代码

先在本地定义了一个函数，这是用来处理来自服务器上数据的函数，下面用一个script标签，并且向服务器发起了一个GET请求，并且指定了处理数据的回调函数，即上方的getData，服务器收到请求后返回了getData("{"name": "jiavan", "age": 20}");，即使一段js代码，将数据传入到回调函数中处理，这样便完成了跨域。

总结：JSONP是很常见的处理跨域的方法，但是这种方式只能是GET类型的请求并且需要服务器配合，这样才能完成跨域，但是它的优点就是实现比较简单并且对低版本浏览器支持都很好。

原文出处 https://github.com/Jiavan/jia... 觉得对你有帮助就给个star吧

混合云服务器托管 jsonp跨域请求 json跨域请求实例 js跨域请求 Js跨域请求视频

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79071.html

前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0
彻底弄懂跨域问题

摘要：浏览器同源策略我们为何要研究跨域问题因为浏览器的同源策略规定某域下的客户端在没明确授权的情况下，不能读写另一个域的资源。跨域，老生常谈的问题简述作为一只前端菜鸟，跨域方面只懂得JSONP和CORS，并未曾深入了解。但随着春招越来越近，就算是菜鸟也要猛振翅膀。近几日仔细研究了跨域问题，写下这篇文章，希望对开发者们有所帮助。在读本文前，希望您对以下知识略有了解。浏览器同源策略 n...

CoorChice 2019-08-23 14:41 评论0 收藏0
有价值的前端技术点

摘要：借着产品层面的功能和视觉升级，我们用对它进行了一次技术重构。前端优化是一个让人技术提升的，希望你也能从这里学到一些东西。年最流行的前端链接我们每周会给多名前端开发者发送新闻邮件。面试 -- 网络 HTTP 现在面试门槛越来越高，很多开发者对于网络知识这块了解的不是很多，遇到这些面试题会手足无措。本篇文章知识主要集中在 HTTP 这块。文中知识来自《图解 HTTP》与维基百科，若有错...

microelec 2019-08-26 11:32 评论0 收藏0
web安全一，同源策略与跨域

摘要：可以说同源策略在安全中扮演着及其重要的角色。我把这个领域的东西写成了一个系列，以后还会继续完善下去安全一同源策略与跨域安全二攻击安全三攻击之所以要将同源策略与跨域写在一起，是因为存在浏览器的同源策略，才会存在跨域问题何为同源策略同源策略是浏览器实现的一种安全策略，它限制了不同源之间的文档和脚本交互的权限。只有同一个源的脚本才会具有操作dom、读写cookie、session 、a...

cgspine 2019-08-22 14:56 评论0 收藏0
再也不学AJAX了！（三）跨域获取资源 ② - JSONP & CORS

摘要：浏览器的同源策略固然保障了互联网世界的数据隐私与数据安全，但是如果当我们需要使用跨域请求资源时，同源策略又会成为开发者的阻碍。我们之前提到过，如果想要绕过浏览器同源策略，实现使用技术跨域获取资源，需要服务端和客户端的协同合作。浏览器的同源策略固然保障了互联网世界的数据隐私与数据安全，但是如果当我们需要使用AJAX跨域请求资源时，同源策略又会成为开发者的阻碍。在本文中，我们会简单介绍需...

enda 2019-08-21 17:55 评论0 收藏0