解决跨域的两种方案JSONP和CORS

曹金海发布于2019-08-22 11:05 / 2670人阅读

摘要：由于第二种方法如今已经采用的非常少，所以我们在这儿不做讲解一带填充的是一种可以在中绕过同源策略，并发起跨域请求的使用模式，可以启动的跨域请求同源策略有一个显著的例外，脚本元素是可以规避检查的。

讲跨域之前，我们先来讲同源策略（SOP），同源策略是网景公司提出的一个著名安全策略。所谓同源就是域名、协议、端口相同。例如http://www.12306.cn中，http就是超文本传输协议，12306就是域名，cn就是端口。如果两个资源需要通信，那么他必须满足SOP。而在前端中我们使用ajax进行数据请求。
如果资源不同域，那么我们在使用ajax请求数据的时候，就会报错，表示拒绝访问。那如何进行跨域处理呢？事实上有三种方法1、JSONP，2、子域代理，3、CORS。由于第二种方法如今已经采用的非常少，所以我们在这儿不做讲解

一、JSONP(JSON with Padding)

带填充的JSON,是一种可以在JS中绕过同源策略，并发起跨域HTTP请求的使用模式，可以启动JS的跨域HTTP请求
同源策略有一个显著的例外，HTML脚本元素是可以规避SOP检查的。那就意味着我们可以采用动态注入脚本的方式向其他源发出HTTP请求。JSONP正是利用了这个例外情况进行跨域数据加载的。

1、工作原理

我们先来看一个例子：使用ajax请求一个普通的JSON文件。假设你使用ajax请求"http://jsonpjs.com/info.json",它会返回一个JSON文档，其中包含一些信息

{
    "title": "jsonp explaintation",
    "author": "Cornelius"
}

浏览器接受到这个json文件后，就会把他当成字符串进行处理，但是这个字符串我们需要把它转换为对象，才能够被javascript所使用，这里我们就可以使用json.parse函数来完成。当然由于同源策略的限制，ajax只能够在同一个域中才能够使用。但是正如我们前面提到的，script是html脚本元素它可以规避SOP的检查所以我们为了请求到json文件，我们可以使用这种方式

通过script元素请求资源，当文件加载完成时，浏览器会把json响应当作Javascript解析。但是这样的情况下我们还是无法获得json数据。
由于该对象没有被存储，也没有赋值给一个变量，或者作为参数传递给一个函数，浏览器就会忽略它。
那么该如何获取JSON输出呢?
这儿有两种方法，第一种直接由服务器把json数据进行存储。例如有一个外部URL，http://jsonjs.com//info.js(注意文件扩展名是.js而不是.json),内容如下

var jsonResponse = {
    "title": "jsonp explaintation",
    "author": "Cornelius"
}

当文件加载完成后，我们就可以通过全局变量jsonResponse访问这个JSON对象了。当该变量包含所请求数据时，我们可以使用script.onload来通知代码。那么另外一种通过一个回调函数代替全局变量的方式来传递JSON对象

jsonHandler({
    "title": "jsonp explaintation",
    "author": "Cornelius"
})

使用这种方式的好处在于，我们不需要依靠script元素的onload事件来判断json是否可用，当info.js被解析时，回调便会自动执行。这需要加载
我的github如果对你有帮助请点一个star
第一次写技术文章，不足的地方还请各位多多指教
参考文献：跨域资源共享 CORS 详解 ---阮一峰

    [third-party javascript ---- Ben Vinegar Anton Kovalyov][2]

GPU云服务器云服务器 json的两种结构】数据统计的两种方法最优生成树的两种算法域名解析的两种主要方式为

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

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

js跨域问题及常用的两种解决方案

摘要：类似这样而在客户端我们只需要定义一个预定好的回调函数即可。处理跨域请求得到的数据其中的是我们在客户端定义好的在数据请求成功后要执行的回调函数。跨域产生的原因跨域是由浏览器的同源策略引起的，即不同源（协议,域名,端口中其中有一个不同）的js是不能读取对方的资源的。当要网站中的js要请求其他网站的数据时就会产生跨域问题，就像下面这样，浏览器会报错。 showImg(https://se...

gyl_coder 2019-08-21 13:50 评论0 收藏0
前端跨域解决方案

摘要：浏览器同源策略什么是浏览器同源策略同源策略是浏览器安全的基础。同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这里我们做一下简要的总结受到浏览器同源策略的限制，页面的无法被页面的访问和操作。不受同源策略的限制。浏览器同源策略什么是浏览器同源策略？同源策略（Same Origin Policy）是浏览器安全的基础。同源策略限制从一个源加载的文档或脚本如何与来...

Honwhy 2019-08-21 17:52 评论0 收藏0
Web开发之跨域与跨域资源共享

摘要：例外当涉及到同源策略时，有两个主要的例外授信范围两个相互之间高度互信的域名，如公司域名，不遵守同源策略的限制。端口未将端口号加入到同源策略的组成部分之中，因此和属于同源并且不受任何限制。原文链接：http://www.devsai.com/2016/11/24/talk-CORS/ 同源策略（same origin policy） 1995年，同源政策由 Netscape 公司引入浏...

Eastboat 2019-08-20 12:29 评论0 收藏0