摘要：注为顶级域名，为二级域名，为三级域名跨域并非浏览器限制了发起跨站请求，而是跨站请求可以正常发起，但返回结果被浏览器拦截了。四总结首先在客户端注册一个，然后把的名字传给服务器。
前言
博主博客：Stillwater的博客
知乎专栏：前端汪汪
本文为作者原创转载请注明出处：http://hiztx.top/2017/01/15/j...
本文介绍了什么是跨域，为什么要跨域，以及跨域的一种常用方法JSONP的原理。
一、什么是跨域？为什么要跨域？ 什么是跨域？既然是跨域，那么肯定是从一个域到另一个域。那么首先要知道满足什么条件才是同一个域。如果两个页面拥有相同的协议，端口和域名，那么这两个页面就属于同一个源（origin），JavaScript允许这种同源页面的数据互相通信。例如你要访问百度首页。
https://www.baidu.com
https是协议
https协议的默认端口为443（不显示）
www.baidu.com为域名
注：一般端口默认为不显示，但是你可以尝试输入以下网址，发现无法访问。因为80端口默认为http协议端口。
https://www.baidu.com:80
现在知道了什么是同一个域，那么就可以解释什么是跨域。只要协议、域名、端口有任何一个不同，都被当作是不同的域，之间的请求就是跨域操作。
为什么要跨域？相信很多人都听过，同源策略。出于安全考虑，浏览器对JavaScript的很多功能进行了限制，其中一条就是，不同域之间不予许进行数据通信。虽然补全了安全漏洞，但是这个限制给前端开发带来了许多不便。例如：
zhidao.baidu.com
wenku.baidu.com
百度知道和百度文库大家都不陌生，都是百度开发的web服务。虽然这两个都是李彦宏的，但是现在告诉他，由于你这两个域名的三级域名不一样，不允许相互数据通信。你说不行就不行？于是就有像李彦宏这样的大牛搞出一些黑科技专门用来跨域通信。JSONP就是其中之一。
二、什么是JSONP？注：
1.com为顶级域名，baidu为二级域名，zhidao/wenku为三级域名
2.跨域并非浏览器限制了发起跨站请求，而是跨站请求可以正常发起，但返回结果被浏览器拦截了。
顾名思义：
JSONP = JSON + P
JSONP（JSON with Padding），JSON是一种轻量级的数据交换格式。而Padding在这里可以翻译为填充。那么JSONP的意思就是，填充的JSON。是数据格式JSON的一种使用模式，可以让网页从别的网域要数据。
三、JSONP原理JSONP的核心原理就是，HTML的script标签可以加载并执行其他域JS文件。
这里区分两个概念，当我们用浏览器打开百度知道首页的时候，是向百度知道服务器发送了一个Https请求，获取到百度知道首页的index.html。如果在这个index.html里面用XMLHttpRequest对象向百度文库服务器发送Https请求，那么就属于跨域，是不允许的。但是如果在百度知道首页的index.html中加入一个script标签，其src属性指向百度文库中的一个.json文件，是允许的。
为了理解这种模式的原理，先想像有一个回传JSON文件的URL，而JavaScript 程序可以用XMLHttpRequest跟这个URL要数据。假设我们的URL是 http://server2.example.com/Re... 。假设小明的UserId 是1823，且当浏览器通过URL传小明的UserId，也就是抓取 http://server2.example.com/Re... 。得到：
{"Name": "小明",
"Id": 1823,
"Rank": 7
}
这个JSON数据可能是依据传过去URL的查询参数动态产生的。这个时候，把 script元素的src属性设成一个回传JSON的URL是可以想像的，这也代表从HTML页面通过script元素抓取JSON是可能的。然而，一份JSON文件并不是一个JavaScript程序。为了让浏览器可以在 script元素运行，从src里URL回传的必须是可运行的JavaScript。在JSONP的使用模式里，该URL回传的是由函数调用包起来的动态生成JSON，这就是JSONP的“填充（padding）”或是“前辍（prefix）”的由来。
服务器会在传给浏览器前将JSON数据填充到回调函数（parseResponse）中。浏览器得到的回应已不是单纯的数据叙述而是一个脚本。在本例中，浏览器得到的是：
{
parseResponse(
{
"Name": "小明",
"Id": 1823,
"Rank": 7
})
}
也就是说，一般情况下浏览器向服务器发送请求得到的都是数据（文本，XML，JSON），但是当采用JSONP技术时候，浏览器向跨域服务器发送请求，得到的是回调函数包住的JSON。此处JSON作为参数传入回调函数，然后再返回给浏览器。
再举个例子：浏览器端：
服务器端：
服务器返回浏览器：
jsonpcallback(
{
"name": "Stillwater",
"age": 12
}
)
在这个例子中，浏览器向服务器发出跨域请求 http://localhost:8080/test.ph... 。请求一个json数据, {"name": "Stillwater","age": 12} 。并且告诉了服务器回调函数的名字。服务器接收到请求后，就将json数据作为参数填充到回调函数中，返回给浏览器。最终返回一个填充了json数据的回调函数。
四、总结首先在客户端注册一个callback，然后把callback的名字传给服务器。
服务器先生成json数据。然后以Javascript语法的方式，生成一个function ，function名字就是传递上来的参数callback。 最后将json数据直接以入参的方式，放置到function中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并执行返回的Javascript 文档，此时数据作为参数，传入到了客户端预先定义好的callback 函数里。（动态执行回调函数）
参考链接：
https://zh.wikipedia.org/wiki...
http://www.cnblogs.com/zichi/...
http://tech.jandou.com/cross-...
https://segmentfault.com/a/11...
http://wearejq.github.io/2015...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/81226.html
摘要：浏览器端需要设置响应头的，，等字段，指定允许的方法，头部，源等信息。可以通过前后端约定一个字段名，比如，来传递一个函数名，从而使得前端可以使用对应的函数，拿到数据，处理数据。 原文地址：https://github.com/HolyZheng/... 了解几个跨域的方案，并且通过简单实践进行体会。 如何实践？ 但是，我们如何进行实践呢？在哪发请求？向什么服务器发请求？很简单，就在当前...
摘要：同源策略做了很严格的限制，但是在实际的场景中，又确实有很多地方需要突破同源策略的限制，也就是我们常说的跨域。使用跨域由于同源策略，一般来说位于的网页无法与不是的服务器沟通，而的元素是一个例外。 本菜鸡最近在写某个页面请求数据时，报了如下的错误。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...
摘要：同源策略做了很严格的限制，但是在实际的场景中，又确实有很多地方需要突破同源策略的限制，也就是我们常说的跨域。使用跨域由于同源策略，一般来说位于的网页无法与不是的服务器沟通，而的元素是一个例外。 本菜鸡最近在写某个页面请求数据时，报了如下的错误。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...
阅读 2552·2021-11-22 15:22
阅读 1445·2021-11-22 14:56
阅读 3423·2021-09-22 15:12
阅读 2286·2021-09-02 15:41
阅读 2006·2021-08-27 16:26
阅读 948·2019-08-30 15:55
阅读 2012·2019-08-29 17:30
阅读 535·2019-08-29 16:26
