当前位置:首页 > 科技 > 正文

jsonp解决跨域原理?json中有复杂的嵌套怎么解析

jsonp解决跨域原理?json中有复杂的嵌套怎么解析

今天给各位分享jsonp解决跨域原理的知识,其中也会对json中有复杂的嵌套怎么解析进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!什么是跨域以及...

今天给各位分享jsonp解决跨域原理的知识,其中也会对json中有复杂的嵌套怎么解析进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

什么是跨域以及解决方法

跨域是指在前端开发中,当浏览器试图在一个域名下发起跨域请求到另一个域名时,浏览器会出于安全原因阻止这种请求的发送。

产生跨域的原因是浏览器的同源策略。为了解决跨域问题,可以使用一些常见的方法,如JSONP,CORS,代理服务器等。

其中,JSONP是通过在前端动态创建`<script>`标签来加载远程脚本文件的方式来实现跨域通信;

CORS是服务器端设置响应头来允许跨域请求;代理服务器则是前端向自己所在的服务器发起请求,再由服务器转发到目标服务器,实现跨域通信。

前后端分离项目,如何解决跨域问题

前后端分离项目跨域问题是不可避免的。通常情况下前端由React、Vue等框架编写,通过ajax请求服务端API,传输数据用json格式。

那么为什么有跨域的问题呢?解决跨域问题有哪些方式?搞清楚这两个问题我们需要了解一下什么是同源策略。

浏览器的同源策略

同源策略(Sameoriginpolicy)是一种安全约定,是所有主流浏览器最核心也是最基本的安全功能之一。同源策略规定:不同域的客户端脚本在没有明确授权的情况下,不能请求对方的资源。同源指的是:域名、协议、端口均相同。

比如我们访问一个网站

http://www.test.com/index.html,

那么这个页面请求如下地址得情况是这样的:

另外,同源策略又分如下两种情况:

DOM同源策略:禁止对不同源的页面DOM进行操作,主要防止iframe的情况。比如iframe标签里放一个支付宝付款的页面,如果没有同源策略,那么钓鱼网站除了域名不同,其他的则可以和支付宝的网站一模一样。

XMLHttpRequest同源策略:禁止使用XHR对象向不同源的服务器发起http请求。比如网站记录了银行的cookie,这个时候你访问了恶意网站,黑客拿到你的cookie,再通过ajax请求之前的银行网站,便可以轻易的拿到你的银行信息。

所以,正是因为有了同源策略,大家的网络环境才相对的安全一些。

跨域问题的解决办法

了解了同源策略,就知道为什么会有跨域问题的产生了,都是为了安全。但是实际研发中,大家还是需要跨域去访问资源。典型的应用场景就是前后端分离的项目了。那么我们如何去解决跨域问题呢?

CORS-跨域资源共享

CORS是一种W3C标准,定义了当产生跨域问题的时候,客户端与服务端如何通信解决跨域问题。实际上就是前后端约定好定义一些自定义的http请求头,让客户端发起请求的时候能够让服务端识别出来该请求是过还是不过。

浏览器将CORS请求分为简单请求和非简单请求:

简单请求

简单请求必须满足以下两个条件:

请求方式必须是HEAD、GET、POST三种方法之一。

Http请求头必须只能是:Accept、Accept-Lanuage、Content-Lanuage、Last-Event-ID、Content-Type,其中Content-Type只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain。

非简单请求

不满足简单请求条件的就是非简单请求。针对非简单请求,浏览器会发起预检请求。预检请求的意思是当浏览器检查到你的页面含有跨域请求的时候,会发送一个OPTIONS请求给对应的服务器,以检测服务器是否允许当前域名的跨域请求。如果服务端允许该域名请求,则返回204或200状态码,浏览器接收到允许请求时候再继续发送对应的GET/POST/PUT/DELETE请求。同时服务器端也会告知浏览器预检请求的缓存时长是多少,在这个时间范围内,浏览器不会再次发起预检请求。

原理基本上就是上面说的这些,实际业务中我们如何通过配置来解决跨域问题呢?基本上常见的就是三种方式:

nginx配置

通常我们在nginx增加如下配置即可解决跨域问题:

用nginx这种方式是最舒服的,不需要客户端和服务端多做其他工作,对代码无入侵。

jsonp

因为script标签是不受浏览器同源策略的影响,允许跨域请求资源(我们的每一个页面都引用了大量第三方js文件)。所以可以利用动态创建script标签,通过src属性发起跨域请求,这就是jsonp的原理。但是jsonp只支持GET请求,所以并不是一种好的方式。

服务端代码控制

可以在服务端增加对跨域请求的支持:

这种方式相当于全局过滤器,对所有请求都过滤一遍。

以上三种方式都可以一定程度上解决跨域问题,但是nginx配置和服务端控制不能同时存在,否则会报“Access-Control-Allow-OriginNotAllowMultiplevalue”的错误。个人比较推荐nginx配置的方式,一劳永逸,不需要每个web项目都去编写跨域的代码。

大家在工作中有没有遇到过跨域问题呢?都是怎么解决的?欢迎评论区交流讨论,共同学习~

json有什么应用场景

jsonp和json是没有关系的,而是一种普通的ajax请求jsonp:作用主要是为了解决跨域请求的问题html的src标签时可以进行跨域请求的,也就是说src可以接受一切服务器上的静态文件,也包括静态文件js当A网站使用B服务器的数据,因为在不同的网段ajax无法进行跨域处理,但是如果对方将A网站需要的数据使用js进行封装,然后A网站可以通过src标签直接获取B服务器上的js文件,然后解析获取需要的数据应用领域:一些网站的天气预报功能股票动态信息显示更好的跨域问题解决方案:webservice

该如何学习js技术

首先要说明的是,咱现在不是高手,最多还是一个半桶水,算是入了JS的门。

谈不上经验,都是一些教训。

这个时候有人要说,“靠,你丫半桶水,凭啥教我们”。您先别急着骂,先听我说。

你叫一个大学生去教小学数学,不见得比一个初中生教得好。因为大学生早已经过了那个阶段,都忘记自己怎么走过来的了。而对于初中生,刚好走过那

个阶段,对自己怎么走过来的还记忆犹新,或者还有一些自己的总结。比如,很多高手觉得那本犀牛书入门很好,他们觉得太简单了,但以我的经验来看,它不是入

门的最好选择。

先说说学js的条件

论条件,咱是文科生,大学专业工商管理,和计算机毛关系都没;有人说英语,读了四年大学,很遗憾,咱还四级没混过;就咱这条件都学得乐呵呵的,您还等啥。

当然学习JS也是有门槛的,就是你的html和css至少还比较熟练,您不能连<body>这东东是干啥的都不知道就开始上JS了,学乘除前,学好加减法总是有益无害的。

再说几点忠告

1,不要着急看一些复杂网页效果的代码,这样除了打击你自信心,什么也学不到。没达到一定的武功水平,割了小JJ也学不会葵花宝典的。

2,别急着加技术交流QQ群,加牛人QQ。如果你找张三丰交流武功,你上去第一句问“丰哥,whereis丹田?”,你会被他一掌劈死的。

3,看网上什么多少天精通JS,啥啥啥从入门到精通,这种教程直接跳过吧,太多的事实证明,以一种浮躁的心态去做任何事都会以失败而告终。

4,千万别去弄啥电脑培训,花了钱和时间不说,关键是学不到东西。本来你买两本好书自学3个月能学会的,他们硬是能折腾你两年。

推荐几本好书

“超毛,你丫吹了半天牛B,还是没说怎么学啊”

呵呵,我也没啥特别的办法,只是推荐几本好书。推荐的书,得按先后顺序看。别第一本没看完,就急着上第二本,并不是每次“穿越”都能成功的

第一阶段:《JavaScriptDOM编程艺术》

看这本书之前,请先确认您对Javascript有个基本的了解,应该知道if

else之类的语法,如果不懂,先去看看我第二阶段推荐的《Javascript高级程序设计》的前三章,记住看三章就别往下看了,回到

《JavaScriptDOM编程艺术》这本书上来。

学习Javascript用《JavaScript

DOM编程艺术》来入门最好不过了,老老实实看两遍,看完了你就会对JS有一个大概的了解,整本书都围绕着一个网页效果例子展开,你跟着老老实实敲一篇,

敲完之后,你会发现这个效果不是常在网页中看到么,发现自己也能做出来网上的效果了,嘿嘿,小有成就感吧。

第二阶段:《JavaScript高级程序设计》

有的书是用来成为经典的,比如犀牛书;还有些书是用来超越经典的,显然这本书就是这种。书中章章经典,由浅入深,其中第6章,关于JS面向对象的解说,没有教程出其右。

如果有一场满分100分的JS考试,看了《JavaScriptDOM编程艺术》能让你拿到20分,那么看完这本书,你就能拿到60分以上了。学完后,你会成就感倍增的,相信我(至少看两遍,推荐三篇,跟着书上的代码一行行的敲)。

这本书强烈推荐购买,写的太TMD牛逼了,给你带来的价值超过百倍千倍。

这本书最新的是第三版,貌似就是前些日子出来的,我看的是第二版,第三版相对第二版变动不大,添加了几章内容,价格目前相差10元左右。

接下来,恭喜你可以下山了,这个时候可以自己做一些事情了

你可以去Ferris这个教程看看他写的这些效果,看看源代码,怎么样,是不是觉得有一部分很简单了,尝试着跟着他写一写这些效果吧。

学技术闭门造车是行不通的,适当的加一两个QQ群交流(注重质量),常去论坛逛逛,你会经常有些小收获的。

再有就是看看前辈这些牛人前辈们分享的文章,它会让你的学习事半功倍的,这里是热心人收集的国内一些牛人的博客、个人网站,点这里。

第三阶段:《JavaScript语言精粹》和《高性能JavaScript》

接下来两本书《JavaScript语言精粹》和《高性能JavaScript》算是JS高级教程的补充,里面有一些内容和JS高级教程重复了,两本书可以同时看,都不厚,可以对前面所学的有一个很好的加强和巩固。

第四阶段:《JavaScriptDOM高级程序设计》和《JavaScript设计模式》

在吃透了前面所说的书之后,接下来两本书的顺序已经无关紧要了,《JavaScriptDOM高级程序设计》(注意和《JavaScript

高级程序设计》相区别)和《JavaScript设计模式》,这两本都是重量级的书,能让你的JS技术上一个新的台阶;这两本书前者主修炼外功,后者主修

炼内功,有点想乾坤大挪移和九阳神功的关系。

《JavaScriptDOM高级程序设计》首先教你搭建一个类似JQuery的额工具函数库,然后通过讲解几个实际中经常遇到的几个应用例子,会让初学者受益匪浅。

《JavaScript设计模式》主要讲Javascript的设计模式,说实话,翻译的质量很一般,有些生硬,但已经基本不影响你的学习,看代码完全可以理解出自己的意思。

json web token是用来做什么的

在Web开发领域,我们经常会听到JsonWebToken和OAuth这类技术选型方案。这两者都是用来替代传统Cookie+Session这种会话认证机制的,但很多人会将这两者混淆。

什么是JsonWebToken?

JsonWebToken简称为JWT(JsonWeb令牌),它是当前最流行的跨域身份验证解决方案,用Json对象在各个系统间安全的传输信息。通俗的说,JWT是基于Json数据组构的认证规范。

它的应用场景主要有:

实现Web应用的单点登录;

应用于用户认证授权操作;

各个应用中传递非敏感信息等。

JWT的优点

JWT这种轻量级认证机制较传统的Cookie+Session机制有哪些优点呢?主要有:

1、无状态特性

Token只是用于校验的,它本身就包含了所登录用户的信息,并不需要在服务端存储Session信息,只需要在客户端存储即可(减轻了服务端的压力)。

2、可跨域访问

我们知道Cookie是有同域限制的,而Token则不存在跨域的问题。

3、它是轻量级的

JWT与OAuth的区别是什么?

上面介绍的JWT干的事情听上去和OAuth似乎差不多,很多人就分不清这两者的区别。简单来说它们之间的关系与区别是这样的:

1、JWT是一种认证规范、OAuth是一种认证框架;

2、OAuth规定了一整套的授权流程,Token是信息传递载体,具体的实现方式是由JWT规定的。

以上就是我的观点,对于这个问题大家是怎么看待的呢?欢迎在下方评论区交流~我是科技领域创作者,十年互联网从业经验,欢迎关注我了解更多科技知识!

好了,本文到此结束,如果可以帮助到大家,还望关注本站哦!

最新文章