转—前端跨域请求原理和举行

新近控制把温馨收藏之作品还置于和讯里来抱着,哈哈~~

 

class=”js-evernote-checked”
data-evernote-id=”63″>作者:高鹏

data-evernote-id=”65″>tingandpeng.com/2016/09/05/前端跨域请求原理及实施/

 

同、
跨域请求的意思

 

浏览器的同源策略,出于防范跨站脚本的抨击,禁止客户端脚本(如
JavaScript)对非同域的劳务拓展跨站调用。

 

诚如的,只要网站的 协议名protocol、 主机host、 端口号port
这三单受到之随机一个不比,网站内部的数目请求和传输就做了跨域调用。这也是大家下实践的答辩基础。我们下
NodeJs 成立了少数只服务器,分别监听 3000、 3001 端口(下边简称 服务器3000
与 服务器3001
),由于端口号不均等,这有限单服务器和服务器上页面通信构成了跨域请求。

 

于服务器3000 上闹如下的页面:

 

图片 1

 

服务器3000 上之请页面中涵盖如下 JavaScript 代码:

 

class=”js-evernote-checked” data-evernote-id=”94″>$( class=”js-evernote-checked” data-evernote-id=”95″>function class=”js-evernote-checked” data-evernote-id=”96″>() class=”js-evernote-checked” data-evernote-id=”97″>  class=”js-evernote-checked”
data-evernote-id=”98″>{

class=”js-evernote-checked” data-evernote-id=”101″>     class=”js-evernote-checked” data-evernote-id=”102″>$( class=”js-evernote-checked” data-evernote-id=”103″>”#submit” class=”js-evernote-checked” data-evernote-id=”104″>). class=”js-evernote-checked” data-evernote-id=”105″>click class=”js-evernote-checked” data-evernote-id=”106″>( class=”js-evernote-checked” data-evernote-id=”107″>function class=”js-evernote-checked” data-evernote-id=”108″>() class=”js-evernote-checked” data-evernote-id=”109″>  class=”js-evernote-checked”
data-evernote-id=”110″>{

class=”js-evernote-checked” data-evernote-id=”113″>         class=”js-evernote-checked” data-evernote-id=”114″>var class=”js-evernote-checked” data-evernote-id=”115″>  class=”js-evernote-checked” data-evernote-id=”116″>data class=”js-evernote-checked” data-evernote-id=”117″> =  class=”js-evernote-checked”
data-evernote-id=”118″>{

class=”js-evernote-checked” data-evernote-id=”121″>             class=”js-evernote-checked” data-evernote-id=”122″>name class=”js-evernote-checked” data-evernote-id=”123″>:  class=”js-evernote-checked” data-evernote-id=”124″>$( class=”js-evernote-checked” data-evernote-id=”125″>”#name” class=”js-evernote-checked” data-evernote-id=”126″>). class=”js-evernote-checked” data-evernote-id=”127″>val class=”js-evernote-checked”
data-evernote-id=”128″>(),

class=”js-evernote-checked” data-evernote-id=”131″>             class=”js-evernote-checked” data-evernote-id=”132″>id class=”js-evernote-checked” data-evernote-id=”133″>:  class=”js-evernote-checked” data-evernote-id=”134″>$( class=”js-evernote-checked” data-evernote-id=”135″>”#id” class=”js-evernote-checked” data-evernote-id=”136″>). class=”js-evernote-checked” data-evernote-id=”137″>val class=”js-evernote-checked”
data-evernote-id=”138″>()

class=”js-evernote-checked” data-evernote-id=”141″>         class=”js-evernote-checked”
data-evernote-id=”142″>};

class=”js-evernote-checked” data-evernote-id=”145″>         class=”js-evernote-checked” data-evernote-id=”146″>$. class=”js-evernote-checked” data-evernote-id=”147″>ajax class=”js-evernote-checked”
data-evernote-id=”148″>({

class=”js-evernote-checked” data-evernote-id=”151″>             class=”js-evernote-checked” data-evernote-id=”152″>type class=”js-evernote-checked” data-evernote-id=”153″>:  class=”js-evernote-checked” data-evernote-id=”154″>’POST’ class=”js-evernote-checked”
data-evernote-id=”155″>,

class=”js-evernote-checked” data-evernote-id=”158″>             class=”js-evernote-checked” data-evernote-id=”159″>data class=”js-evernote-checked” data-evernote-id=”160″>:  class=”js-evernote-checked” data-evernote-id=”161″>data class=”js-evernote-checked”
data-evernote-id=”162″>,

class=”js-evernote-checked” data-evernote-id=”165″>             class=”js-evernote-checked” data-evernote-id=”166″>url class=”js-evernote-checked” data-evernote-id=”167″>:  class=”js-evernote-checked”
data-evernote-id=”168″>’http://localhost:3000/ajax/deal‘ class=”js-evernote-checked”
data-evernote-id=”169″>,

class=”js-evernote-checked” data-evernote-id=”172″>             class=”js-evernote-checked” data-evernote-id=”173″>dataType class=”js-evernote-checked” data-evernote-id=”174″>:  class=”js-evernote-checked” data-evernote-id=”175″>’json’ class=”js-evernote-checked”
data-evernote-id=”176″>,

class=”js-evernote-checked” data-evernote-id=”179″>             class=”js-evernote-checked” data-evernote-id=”180″>cache class=”js-evernote-checked” data-evernote-id=”181″>:  class=”js-evernote-checked” data-evernote-id=”182″>false class=”js-evernote-checked”
data-evernote-id=”183″>,

class=”js-evernote-checked” data-evernote-id=”186″>             class=”js-evernote-checked” data-evernote-id=”187″>timeout class=”js-evernote-checked” data-evernote-id=”188″>:  class=”js-evernote-checked” data-evernote-id=”189″>5000 class=”js-evernote-checked”
data-evernote-id=”190″>,

class=”js-evernote-checked” data-evernote-id=”193″>             class=”js-evernote-checked” data-evernote-id=”194″>success class=”js-evernote-checked” data-evernote-id=”195″>:  class=”js-evernote-checked” data-evernote-id=”196″>function class=”js-evernote-checked” data-evernote-id=”197″>( class=”js-evernote-checked” data-evernote-id=”198″>data class=”js-evernote-checked” data-evernote-id=”199″>) class=”js-evernote-checked” data-evernote-id=”200″>  class=”js-evernote-checked”
data-evernote-id=”201″>{

class=”js-evernote-checked”
data-evernote-id=”204″>                 class=”js-evernote-checked” data-evernote-id=”205″>console class=”js-evernote-checked” data-evernote-id=”206″>. class=”js-evernote-checked” data-evernote-id=”207″>log class=”js-evernote-checked” data-evernote-id=”208″>( class=”js-evernote-checked” data-evernote-id=”209″>data class=”js-evernote-checked”
data-evernote-id=”210″>)

class=”js-evernote-checked” data-evernote-id=”213″>             class=”js-evernote-checked”
data-evernote-id=”214″>},

class=”js-evernote-checked” data-evernote-id=”217″>             class=”js-evernote-checked” data-evernote-id=”218″>error class=”js-evernote-checked” data-evernote-id=”219″>:  class=”js-evernote-checked” data-evernote-id=”220″>function class=”js-evernote-checked” data-evernote-id=”221″>( class=”js-evernote-checked” data-evernote-id=”222″>jqXHR class=”js-evernote-checked” data-evernote-id=”223″>, class=”js-evernote-checked” data-evernote-id=”224″>  class=”js-evernote-checked” data-evernote-id=”225″>textStatus class=”js-evernote-checked” data-evernote-id=”226″>, class=”js-evernote-checked” data-evernote-id=”227″>  class=”js-evernote-checked” data-evernote-id=”228″>errorThrown class=”js-evernote-checked” data-evernote-id=”229″>) class=”js-evernote-checked” data-evernote-id=”230″>  class=”js-evernote-checked”
data-evernote-id=”231″>{

class=”js-evernote-checked”
data-evernote-id=”234″>                 class=”js-evernote-checked” data-evernote-id=”235″>console class=”js-evernote-checked” data-evernote-id=”236″>. class=”js-evernote-checked” data-evernote-id=”237″>log class=”js-evernote-checked” data-evernote-id=”238″>( class=”js-evernote-checked” data-evernote-id=”239″>’error ‘ class=”js-evernote-checked” data-evernote-id=”240″> +  class=”js-evernote-checked” data-evernote-id=”241″>textStatus class=”js-evernote-checked” data-evernote-id=”242″> +  class=”js-evernote-checked” data-evernote-id=”243″>’ ‘ class=”js-evernote-checked” data-evernote-id=”244″> +  class=”js-evernote-checked” data-evernote-id=”245″>errorThrown class=”js-evernote-checked”
data-evernote-id=”246″>);

class=”js-evernote-checked” data-evernote-id=”249″>             class=”js-evernote-checked”
data-evernote-id=”250″>}

class=”js-evernote-checked” data-evernote-id=”253″>         class=”js-evernote-checked”
data-evernote-id=”254″>});

class=”js-evernote-checked” data-evernote-id=”257″>     class=”js-evernote-checked”
data-evernote-id=”258″>});

});

 

服务器3000 对应的处理函数为

 

class=”js-evernote-checked” data-evernote-id=”269″>pp class=”js-evernote-checked” data-evernote-id=”270″>. class=”js-evernote-checked” data-evernote-id=”271″>post class=”js-evernote-checked” data-evernote-id=”272″>( class=”js-evernote-checked” data-evernote-id=”273″>’/ajax/deal’ class=”js-evernote-checked” data-evernote-id=”274″>, class=”js-evernote-checked” data-evernote-id=”275″>  class=”js-evernote-checked” data-evernote-id=”276″>function class=”js-evernote-checked” data-evernote-id=”277″>( class=”js-evernote-checked” data-evernote-id=”278″>req class=”js-evernote-checked” data-evernote-id=”279″>, class=”js-evernote-checked” data-evernote-id=”280″>  class=”js-evernote-checked” data-evernote-id=”281″>res class=”js-evernote-checked” data-evernote-id=”282″>) class=”js-evernote-checked” data-evernote-id=”283″>  class=”js-evernote-checked”
data-evernote-id=”284″>{

class=”js-evernote-checked” data-evernote-id=”287″>     class=”js-evernote-checked” data-evernote-id=”288″>console class=”js-evernote-checked” data-evernote-id=”289″>. class=”js-evernote-checked” data-evernote-id=”290″>log class=”js-evernote-checked” data-evernote-id=”291″>( class=”js-evernote-checked” data-evernote-id=”292″>”server accept:
“, class=”js-evernote-checked” data-evernote-id=”294″>  class=”js-evernote-checked” data-evernote-id=”295″>req class=”js-evernote-checked” data-evernote-id=”296″>. class=”js-evernote-checked” data-evernote-id=”297″>body class=”js-evernote-checked” data-evernote-id=”298″>. class=”js-evernote-checked” data-evernote-id=”299″>name class=”js-evernote-checked” data-evernote-id=”300″>, class=”js-evernote-checked” data-evernote-id=”301″>  class=”js-evernote-checked” data-evernote-id=”302″>req class=”js-evernote-checked” data-evernote-id=”303″>. class=”js-evernote-checked” data-evernote-id=”304″>body class=”js-evernote-checked” data-evernote-id=”305″>. class=”js-evernote-checked” data-evernote-id=”306″>id class=”js-evernote-checked”
data-evernote-id=”307″>)

class=”js-evernote-checked” data-evernote-id=”310″>     class=”js-evernote-checked” data-evernote-id=”311″>var class=”js-evernote-checked” data-evernote-id=”312″>  class=”js-evernote-checked” data-evernote-id=”313″>data class=”js-evernote-checked” data-evernote-id=”314″> =  class=”js-evernote-checked”
data-evernote-id=”315″>{

class=”js-evernote-checked” data-evernote-id=”318″>         class=”js-evernote-checked” data-evernote-id=”319″>name class=”js-evernote-checked” data-evernote-id=”320″>:  class=”js-evernote-checked” data-evernote-id=”321″>req class=”js-evernote-checked” data-evernote-id=”322″>. class=”js-evernote-checked” data-evernote-id=”323″>body class=”js-evernote-checked” data-evernote-id=”324″>. class=”js-evernote-checked” data-evernote-id=”325″>name class=”js-evernote-checked” data-evernote-id=”326″> +  class=”js-evernote-checked” data-evernote-id=”327″>’ – server 3000
process’ data-evernote-id=”328″>,

class=”js-evernote-checked” data-evernote-id=”331″>         class=”js-evernote-checked” data-evernote-id=”332″>id class=”js-evernote-checked” data-evernote-id=”333″>:  class=”js-evernote-checked” data-evernote-id=”334″>req class=”js-evernote-checked” data-evernote-id=”335″>. class=”js-evernote-checked” data-evernote-id=”336″>body class=”js-evernote-checked” data-evernote-id=”337″>. class=”js-evernote-checked” data-evernote-id=”338″>id class=”js-evernote-checked” data-evernote-id=”339″> +  class=”js-evernote-checked” data-evernote-id=”340″>’ – server 3000
process’

class=”js-evernote-checked” data-evernote-id=”343″>     class=”js-evernote-checked”
data-evernote-id=”344″>}

class=”js-evernote-checked” data-evernote-id=”347″>     class=”js-evernote-checked” data-evernote-id=”348″>res class=”js-evernote-checked” data-evernote-id=”349″>. class=”js-evernote-checked” data-evernote-id=”350″>send class=”js-evernote-checked” data-evernote-id=”351″>( class=”js-evernote-checked” data-evernote-id=”352″>data class=”js-evernote-checked”
data-evernote-id=”353″>)

class=”js-evernote-checked” data-evernote-id=”356″>     class=”js-evernote-checked” data-evernote-id=”357″>res class=”js-evernote-checked” data-evernote-id=”358″>. class=”js-evernote-checked” data-evernote-id=”359″>end class=”js-evernote-checked”
data-evernote-id=”360″>()

})

 

伸手页面再次来到结果:

 

图片 2

 

此处数据处理成。

 

出于数量要一般都是由于页面发送数据字段,服务器依照这一个字段作相应的拍卖,如数据库查询,字符串操作等等。所以我们这里大概的拍卖数量(在数背后长字符串‘server
3000 process’),并且重回给浏览器,表示数据经过服务器端处理。

苟给 服务器3000 上的页面向 服务器 3001 发起呼吁会怎么为?

 

以请求页面中之 ajax 请求路径改吧:

 

class=”js-evernote-checked” data-evernote-id=”385″>$. class=”js-evernote-checked” data-evernote-id=”386″>ajax class=”js-evernote-checked”
data-evernote-id=”387″>({

class=”js-evernote-checked” data-evernote-id=”390″>     class=”js-evernote-checked”
data-evernote-id=”391″>…

class=”js-evernote-checked” data-evernote-id=”394″>     class=”js-evernote-checked” data-evernote-id=”395″>url class=”js-evernote-checked” data-evernote-id=”396″>:  class=”js-evernote-checked”
data-evernote-id=”397″>’http://localhost:3001/ajax/deal‘ class=”js-evernote-checked”
data-evernote-id=”398″>,

class=”js-evernote-checked” data-evernote-id=”401″>     class=”js-evernote-checked”
data-evernote-id=”402″>…

});

 

服务器3001 对应之处理函数与 服务器3000 类似:

 

class=”js-evernote-checked” data-evernote-id=”413″>app class=”js-evernote-checked” data-evernote-id=”414″>. class=”js-evernote-checked” data-evernote-id=”415″>post class=”js-evernote-checked” data-evernote-id=”416″>( class=”js-evernote-checked” data-evernote-id=”417″>’/ajax/deal’ class=”js-evernote-checked” data-evernote-id=”418″>, class=”js-evernote-checked” data-evernote-id=”419″>  class=”js-evernote-checked” data-evernote-id=”420″>function class=”js-evernote-checked” data-evernote-id=”421″>( class=”js-evernote-checked” data-evernote-id=”422″>req class=”js-evernote-checked” data-evernote-id=”423″>, class=”js-evernote-checked” data-evernote-id=”424″>  class=”js-evernote-checked” data-evernote-id=”425″>res class=”js-evernote-checked” data-evernote-id=”426″>) class=”js-evernote-checked” data-evernote-id=”427″>  class=”js-evernote-checked”
data-evernote-id=”428″>{

class=”js-evernote-checked” data-evernote-id=”431″>     class=”js-evernote-checked” data-evernote-id=”432″>console class=”js-evernote-checked” data-evernote-id=”433″>. class=”js-evernote-checked” data-evernote-id=”434″>log class=”js-evernote-checked” data-evernote-id=”435″>( class=”js-evernote-checked” data-evernote-id=”436″>”server accept:
“, class=”js-evernote-checked” data-evernote-id=”438″>  class=”js-evernote-checked” data-evernote-id=”439″>req class=”js-evernote-checked” data-evernote-id=”440″>. class=”js-evernote-checked” data-evernote-id=”441″>body class=”js-evernote-checked” data-evernote-id=”442″>. class=”js-evernote-checked” data-evernote-id=”443″>name class=”js-evernote-checked” data-evernote-id=”444″>, class=”js-evernote-checked” data-evernote-id=”445″>  class=”js-evernote-checked” data-evernote-id=”446″>req class=”js-evernote-checked” data-evernote-id=”447″>. class=”js-evernote-checked” data-evernote-id=”448″>body class=”js-evernote-checked” data-evernote-id=”449″>. class=”js-evernote-checked” data-evernote-id=”450″>id class=”js-evernote-checked”
data-evernote-id=”451″>)

class=”js-evernote-checked” data-evernote-id=”454″>     class=”js-evernote-checked” data-evernote-id=”455″>var class=”js-evernote-checked” data-evernote-id=”456″>  class=”js-evernote-checked” data-evernote-id=”457″>data class=”js-evernote-checked” data-evernote-id=”458″> =  class=”js-evernote-checked”
data-evernote-id=”459″>{

class=”js-evernote-checked” data-evernote-id=”462″>         class=”js-evernote-checked” data-evernote-id=”463″>name class=”js-evernote-checked” data-evernote-id=”464″>:  class=”js-evernote-checked” data-evernote-id=”465″>req class=”js-evernote-checked” data-evernote-id=”466″>. class=”js-evernote-checked” data-evernote-id=”467″>body class=”js-evernote-checked” data-evernote-id=”468″>. class=”js-evernote-checked” data-evernote-id=”469″>name class=”js-evernote-checked” data-evernote-id=”470″> +  class=”js-evernote-checked” data-evernote-id=”471″>’ – server 3001
process’ data-evernote-id=”472″>,

class=”js-evernote-checked” data-evernote-id=”475″>         class=”js-evernote-checked” data-evernote-id=”476″>id class=”js-evernote-checked” data-evernote-id=”477″>:  class=”js-evernote-checked” data-evernote-id=”478″>req class=”js-evernote-checked” data-evernote-id=”479″>. class=”js-evernote-checked” data-evernote-id=”480″>body class=”js-evernote-checked” data-evernote-id=”481″>. class=”js-evernote-checked” data-evernote-id=”482″>id class=”js-evernote-checked” data-evernote-id=”483″> +  class=”js-evernote-checked” data-evernote-id=”484″>’ – server 3001
process’

class=”js-evernote-checked” data-evernote-id=”487″>     class=”js-evernote-checked”
data-evernote-id=”488″>}

class=”js-evernote-checked” data-evernote-id=”491″>     class=”js-evernote-checked” data-evernote-id=”492″>res class=”js-evernote-checked” data-evernote-id=”493″>. class=”js-evernote-checked” data-evernote-id=”494″>send class=”js-evernote-checked” data-evernote-id=”495″>( class=”js-evernote-checked” data-evernote-id=”496″>data class=”js-evernote-checked”
data-evernote-id=”497″>)

class=”js-evernote-checked” data-evernote-id=”500″>     class=”js-evernote-checked” data-evernote-id=”501″>res class=”js-evernote-checked” data-evernote-id=”502″>. class=”js-evernote-checked” data-evernote-id=”503″>end class=”js-evernote-checked”
data-evernote-id=”504″>()

})

 

结果如下:

 

图片 3

 

结果表明了俺们地点所说之捧口号不同,暴发了跨域请求的调用。

 

得小心的是,服务器 3001 控制台有出口:

 

server
accept:  chiaki 3001

 

顿时评释跨域请求并非是浏览器限制了倡导跨站请求,而是请可以健康发起,到达服务器端,可是服务器再次来到的结果碰头于浏览器拦截。

 

仲、 利用
JSONP 实现跨域调用

 

协议跨域调用,可能我们先是想到的抑听说过的就是是 JSONP 了。

 

2.1 什么是JSONP

 

JSONP (JSON with Padding or JSON-P) is a JSON extension used by web
developers to overcome the cross-domain restrictions imposed by
browsers’ same-origin policy that limits access to resources retrieved
from origins other than the one the page was served by. In layman’s
terms, one website cannot just simply access the data from another
website.

 

It was developed because handling a browsers’ same origin policy can
be difficult, so using JSONP abstracts the difficulties and makes it
easier.

 

JSON stands for “JavaScript Object Notation”, a format by which object
fields are represented as key-value pairs which is used to represent
data.

 

JSONP 是 JSON
的等同栽选用格局,可以解决主流浏览器的跨域数据访问问题。其原理是冲
XmlHttpRequest 对象被同源策略的震慑,而 <script>
标签元素却非为同源策略影响,可以加载跨域服务器上的剧本,网页可以于任何来源动态暴发JSON 资料。用 JSONP 获取的不是 JSON 数据,而是可以一直运行的 JavaScript
语句。

 

2.2 使用 jQuery 集成的 $.ajax 实现 JSONP 跨域调用

 

咱先行由简单的贯彻起来,利用 jQuery 中之 $.ajax 来落实上诉的跨域调用。

 

依然是端的事例,大家拿 服务器 3000 上之呼吁页面的 JavaScript
代码改吗:

 

//
回调函数

class=”js-evernote-checked” data-evernote-id=”569″>function class=”js-evernote-checked” data-evernote-id=”570″>  class=”js-evernote-checked” data-evernote-id=”571″>jsonpCallback class=”js-evernote-checked” data-evernote-id=”572″>( class=”js-evernote-checked” data-evernote-id=”573″>data class=”js-evernote-checked” data-evernote-id=”574″>) class=”js-evernote-checked” data-evernote-id=”575″>  class=”js-evernote-checked”
data-evernote-id=”576″>{

class=”js-evernote-checked” data-evernote-id=”579″>     class=”js-evernote-checked” data-evernote-id=”580″>console class=”js-evernote-checked” data-evernote-id=”581″>. class=”js-evernote-checked” data-evernote-id=”582″>log class=”js-evernote-checked” data-evernote-id=”583″>( class=”js-evernote-checked” data-evernote-id=”584″>”jsonpCallback:
” +  class=”js-evernote-checked” data-evernote-id=”586″>data class=”js-evernote-checked” data-evernote-id=”587″>. class=”js-evernote-checked” data-evernote-id=”588″>name class=”js-evernote-checked”
data-evernote-id=”589″>)

}

class=”js-evernote-checked” data-evernote-id=”594″>$( class=”js-evernote-checked” data-evernote-id=”595″>”#submit” class=”js-evernote-checked” data-evernote-id=”596″>). class=”js-evernote-checked” data-evernote-id=”597″>click class=”js-evernote-checked” data-evernote-id=”598″>( class=”js-evernote-checked” data-evernote-id=”599″>function class=”js-evernote-checked” data-evernote-id=”600″>() class=”js-evernote-checked” data-evernote-id=”601″>  class=”js-evernote-checked”
data-evernote-id=”602″>{

class=”js-evernote-checked” data-evernote-id=”605″>     class=”js-evernote-checked” data-evernote-id=”606″>var class=”js-evernote-checked” data-evernote-id=”607″>  class=”js-evernote-checked” data-evernote-id=”608″>data class=”js-evernote-checked” data-evernote-id=”609″> =  class=”js-evernote-checked”
data-evernote-id=”610″>{

class=”js-evernote-checked” data-evernote-id=”613″>         class=”js-evernote-checked” data-evernote-id=”614″>name class=”js-evernote-checked” data-evernote-id=”615″>:  class=”js-evernote-checked” data-evernote-id=”616″>$( class=”js-evernote-checked” data-evernote-id=”617″>”#name” class=”js-evernote-checked” data-evernote-id=”618″>). class=”js-evernote-checked” data-evernote-id=”619″>val class=”js-evernote-checked”
data-evernote-id=”620″>(),

class=”js-evernote-checked” data-evernote-id=”623″>         class=”js-evernote-checked” data-evernote-id=”624″>id class=”js-evernote-checked” data-evernote-id=”625″>:  class=”js-evernote-checked” data-evernote-id=”626″>$( class=”js-evernote-checked” data-evernote-id=”627″>”#id” class=”js-evernote-checked” data-evernote-id=”628″>). class=”js-evernote-checked” data-evernote-id=”629″>val class=”js-evernote-checked”
data-evernote-id=”630″>()

class=”js-evernote-checked” data-evernote-id=”633″>     class=”js-evernote-checked”
data-evernote-id=”634″>};

class=”js-evernote-checked” data-evernote-id=”637″>     class=”js-evernote-checked” data-evernote-id=”638″>$. class=”js-evernote-checked” data-evernote-id=”639″>ajax class=”js-evernote-checked”
data-evernote-id=”640″>({

class=”js-evernote-checked” data-evernote-id=”643″>         class=”js-evernote-checked” data-evernote-id=”644″>url class=”js-evernote-checked” data-evernote-id=”645″>:  class=”js-evernote-checked”
data-evernote-id=”646″>’http://localhost:3001/ajax/deal‘ class=”js-evernote-checked”
data-evernote-id=”647″>,

class=”js-evernote-checked” data-evernote-id=”650″>         class=”js-evernote-checked” data-evernote-id=”651″>data class=”js-evernote-checked” data-evernote-id=”652″>:  class=”js-evernote-checked” data-evernote-id=”653″>data class=”js-evernote-checked”
data-evernote-id=”654″>,

class=”js-evernote-checked” data-evernote-id=”657″>         class=”js-evernote-checked” data-evernote-id=”658″>dataType class=”js-evernote-checked” data-evernote-id=”659″>:  class=”js-evernote-checked” data-evernote-id=”660″>’jsonp’ class=”js-evernote-checked”
data-evernote-id=”661″>,

class=”js-evernote-checked” data-evernote-id=”664″>         class=”js-evernote-checked” data-evernote-id=”665″>cache class=”js-evernote-checked” data-evernote-id=”666″>:  class=”js-evernote-checked” data-evernote-id=”667″>false class=”js-evernote-checked”
data-evernote-id=”668″>,

class=”js-evernote-checked” data-evernote-id=”671″>         class=”js-evernote-checked” data-evernote-id=”672″>timeout class=”js-evernote-checked” data-evernote-id=”673″>:  class=”js-evernote-checked” data-evernote-id=”674″>5000 class=”js-evernote-checked”
data-evernote-id=”675″>,

class=”js-evernote-checked” data-evernote-id=”678″>         class=”js-evernote-checked” data-evernote-id=”679″>// jsonp
字段含义为服务器通过什么字段获取回调函数的称号

class=”js-evernote-checked” data-evernote-id=”682″>         class=”js-evernote-checked” data-evernote-id=”683″>jsonp class=”js-evernote-checked” data-evernote-id=”684″>:  class=”js-evernote-checked” data-evernote-id=”685″>’callback’ class=”js-evernote-checked”
data-evernote-id=”686″>,

class=”js-evernote-checked” data-evernote-id=”689″>         class=”js-evernote-checked” data-evernote-id=”690″>//
表明本地回调函数的号,jquery
默认随机生成一个函数名称

class=”js-evernote-checked” data-evernote-id=”693″>         class=”js-evernote-checked” data-evernote-id=”694″>jsonpCallback class=”js-evernote-checked” data-evernote-id=”695″>:  class=”js-evernote-checked”
data-evernote-id=”696″>’jsonpCallback’ class=”js-evernote-checked”
data-evernote-id=”697″>,

class=”js-evernote-checked” data-evernote-id=”700″>         class=”js-evernote-checked” data-evernote-id=”701″>success class=”js-evernote-checked” data-evernote-id=”702″>:  class=”js-evernote-checked” data-evernote-id=”703″>function class=”js-evernote-checked” data-evernote-id=”704″>( class=”js-evernote-checked” data-evernote-id=”705″>data class=”js-evernote-checked” data-evernote-id=”706″>) class=”js-evernote-checked” data-evernote-id=”707″>  class=”js-evernote-checked”
data-evernote-id=”708″>{

class=”js-evernote-checked” data-evernote-id=”711″>             class=”js-evernote-checked” data-evernote-id=”712″>console class=”js-evernote-checked” data-evernote-id=”713″>. class=”js-evernote-checked” data-evernote-id=”714″>log class=”js-evernote-checked” data-evernote-id=”715″>( class=”js-evernote-checked” data-evernote-id=”716″>”ajax success
callback: ” data-evernote-id=”717″> +  data-evernote-id=”718″>data data-evernote-id=”719″>. data-evernote-id=”720″>name data-evernote-id=”721″>)

class=”js-evernote-checked” data-evernote-id=”724″>         class=”js-evernote-checked”
data-evernote-id=”725″>},

class=”js-evernote-checked” data-evernote-id=”728″>         class=”js-evernote-checked” data-evernote-id=”729″>error class=”js-evernote-checked” data-evernote-id=”730″>:  class=”js-evernote-checked” data-evernote-id=”731″>function class=”js-evernote-checked” data-evernote-id=”732″>( class=”js-evernote-checked” data-evernote-id=”733″>jqXHR class=”js-evernote-checked” data-evernote-id=”734″>, class=”js-evernote-checked” data-evernote-id=”735″>  class=”js-evernote-checked” data-evernote-id=”736″>textStatus class=”js-evernote-checked” data-evernote-id=”737″>, class=”js-evernote-checked” data-evernote-id=”738″>  class=”js-evernote-checked” data-evernote-id=”739″>errorThrown class=”js-evernote-checked” data-evernote-id=”740″>) class=”js-evernote-checked” data-evernote-id=”741″>  class=”js-evernote-checked”
data-evernote-id=”742″>{

class=”js-evernote-checked” data-evernote-id=”745″>             class=”js-evernote-checked” data-evernote-id=”746″>console class=”js-evernote-checked” data-evernote-id=”747″>. class=”js-evernote-checked” data-evernote-id=”748″>log class=”js-evernote-checked” data-evernote-id=”749″>( class=”js-evernote-checked” data-evernote-id=”750″>textStatus class=”js-evernote-checked” data-evernote-id=”751″> +  class=”js-evernote-checked” data-evernote-id=”752″>’ ‘ class=”js-evernote-checked” data-evernote-id=”753″> +  class=”js-evernote-checked” data-evernote-id=”754″>errorThrown class=”js-evernote-checked”
data-evernote-id=”755″>);

class=”js-evernote-checked” data-evernote-id=”758″>         class=”js-evernote-checked”
data-evernote-id=”759″>}

class=”js-evernote-checked” data-evernote-id=”762″>     class=”js-evernote-checked”
data-evernote-id=”763″>});

});

 

服务器 3001 上相应之处理函数为:

 

class=”js-evernote-checked” data-evernote-id=”774″>app class=”js-evernote-checked” data-evernote-id=”775″>. class=”js-evernote-checked” data-evernote-id=”776″>get class=”js-evernote-checked” data-evernote-id=”777″>( class=”js-evernote-checked” data-evernote-id=”778″>’/ajax/deal’ class=”js-evernote-checked” data-evernote-id=”779″>, class=”js-evernote-checked” data-evernote-id=”780″>  class=”js-evernote-checked” data-evernote-id=”781″>function class=”js-evernote-checked” data-evernote-id=”782″>( class=”js-evernote-checked” data-evernote-id=”783″>req class=”js-evernote-checked” data-evernote-id=”784″>, class=”js-evernote-checked” data-evernote-id=”785″>  class=”js-evernote-checked” data-evernote-id=”786″>res class=”js-evernote-checked” data-evernote-id=”787″>) class=”js-evernote-checked” data-evernote-id=”788″>  class=”js-evernote-checked”
data-evernote-id=”789″>{

class=”js-evernote-checked” data-evernote-id=”792″>     class=”js-evernote-checked” data-evernote-id=”793″>console class=”js-evernote-checked” data-evernote-id=”794″>. class=”js-evernote-checked” data-evernote-id=”795″>log class=”js-evernote-checked” data-evernote-id=”796″>( class=”js-evernote-checked” data-evernote-id=”797″>”server accept:
“, class=”js-evernote-checked” data-evernote-id=”799″>  class=”js-evernote-checked” data-evernote-id=”800″>req class=”js-evernote-checked” data-evernote-id=”801″>. class=”js-evernote-checked” data-evernote-id=”802″>query class=”js-evernote-checked” data-evernote-id=”803″>. class=”js-evernote-checked” data-evernote-id=”804″>name class=”js-evernote-checked” data-evernote-id=”805″>, class=”js-evernote-checked” data-evernote-id=”806″>  class=”js-evernote-checked” data-evernote-id=”807″>req class=”js-evernote-checked” data-evernote-id=”808″>. class=”js-evernote-checked” data-evernote-id=”809″>query class=”js-evernote-checked” data-evernote-id=”810″>. class=”js-evernote-checked” data-evernote-id=”811″>id class=”js-evernote-checked”
data-evernote-id=”812″>)

class=”js-evernote-checked” data-evernote-id=”815″>     class=”js-evernote-checked” data-evernote-id=”816″>var class=”js-evernote-checked” data-evernote-id=”817″>  class=”js-evernote-checked” data-evernote-id=”818″>data class=”js-evernote-checked” data-evernote-id=”819″> =  class=”js-evernote-checked” data-evernote-id=”820″>”{” class=”js-evernote-checked” data-evernote-id=”821″> +  class=”js-evernote-checked” data-evernote-id=”822″>”name:'” class=”js-evernote-checked” data-evernote-id=”823″> +  class=”js-evernote-checked” data-evernote-id=”824″>req class=”js-evernote-checked” data-evernote-id=”825″>. class=”js-evernote-checked” data-evernote-id=”826″>query class=”js-evernote-checked” data-evernote-id=”827″>. class=”js-evernote-checked” data-evernote-id=”828″>name class=”js-evernote-checked” data-evernote-id=”829″> +  class=”js-evernote-checked” data-evernote-id=”830″>” – server 3001
process’,” data-evernote-id=”831″> +  data-evernote-id=”832″>”id:'” data-evernote-id=”833″> +  data-evernote-id=”834″>req data-evernote-id=”835″>. data-evernote-id=”836″>query data-evernote-id=”837″>. data-evernote-id=”838″>id data-evernote-id=”839″> +  data-evernote-id=”840″>” – server 3001 process'” class=”js-evernote-checked” data-evernote-id=”841″> + class=”js-evernote-checked”
data-evernote-id=”842″>”}”

class=”js-evernote-checked” data-evernote-id=”845″>     class=”js-evernote-checked” data-evernote-id=”846″>var class=”js-evernote-checked” data-evernote-id=”847″>  class=”js-evernote-checked” data-evernote-id=”848″>callback class=”js-evernote-checked” data-evernote-id=”849″> =  class=”js-evernote-checked” data-evernote-id=”850″>req class=”js-evernote-checked” data-evernote-id=”851″>. class=”js-evernote-checked” data-evernote-id=”852″>query class=”js-evernote-checked” data-evernote-id=”853″>. class=”js-evernote-checked”
data-evernote-id=”854″>callback

class=”js-evernote-checked” data-evernote-id=”857″>     class=”js-evernote-checked” data-evernote-id=”858″>var class=”js-evernote-checked” data-evernote-id=”859″>  class=”js-evernote-checked” data-evernote-id=”860″>jsonp class=”js-evernote-checked” data-evernote-id=”861″> =  class=”js-evernote-checked” data-evernote-id=”862″>callback class=”js-evernote-checked” data-evernote-id=”863″> +  class=”js-evernote-checked” data-evernote-id=”864″>'(‘ class=”js-evernote-checked” data-evernote-id=”865″> +  class=”js-evernote-checked” data-evernote-id=”866″>data class=”js-evernote-checked” data-evernote-id=”867″> +  class=”js-evernote-checked”
data-evernote-id=”868″>’)’

class=”js-evernote-checked” data-evernote-id=”871″>     class=”js-evernote-checked” data-evernote-id=”872″>console class=”js-evernote-checked” data-evernote-id=”873″>. class=”js-evernote-checked” data-evernote-id=”874″>log class=”js-evernote-checked” data-evernote-id=”875″>( class=”js-evernote-checked” data-evernote-id=”876″>jsonp class=”js-evernote-checked”
data-evernote-id=”877″>)

class=”js-evernote-checked” data-evernote-id=”880″>     class=”js-evernote-checked” data-evernote-id=”881″>res class=”js-evernote-checked” data-evernote-id=”882″>. class=”js-evernote-checked” data-evernote-id=”883″>send class=”js-evernote-checked” data-evernote-id=”884″>( class=”js-evernote-checked” data-evernote-id=”885″>jsonp class=”js-evernote-checked”
data-evernote-id=”886″>)

class=”js-evernote-checked” data-evernote-id=”889″>     class=”js-evernote-checked” data-evernote-id=”890″>res class=”js-evernote-checked” data-evernote-id=”891″>. class=”js-evernote-checked” data-evernote-id=”892″>end class=”js-evernote-checked”
data-evernote-id=”893″>()

})

 

那边一定假使小心 data 中字符串拼接,不可知平昔将 JSON 格式的 data
直接招被回调函数,否则会生出编译错误: parsererror Error: jsonpCallback
was not called。

 

实际上脑海里当有一个概念:利用 JSONP 格式再次来到的价值一段落要那施行的
JavaScript 代码,所以未会合像 ajax 的 XmlHttpRequest
这样可以监听不同事件对数据开展不同处理。

 

处理结果如下所示:

 

图片 4

 

2.3 使用 <script> 标签原生实现 JSONP

 

透过地方的轩然大波,你是匪是当 JSONP 的实现与 Ajax 承德小异?

 

实际上,由于实现之法则不同,由 JSONP 实现之跨域调用不是通过 XmlHttpRequset
对象,而是通过 script 标签,所以在促成原理上,JSONP 和 Ajax
已经一点涉还无了。看上去情势相似只是出于 jQuery 对 JSONP
做了包和换。

 

依照在方的事例中,大家而要传的多寡 data 格式如下:

 

{

class=”js-evernote-checked” data-evernote-id=”929″>     class=”js-evernote-checked” data-evernote-id=”930″>name class=”js-evernote-checked” data-evernote-id=”931″>:  class=”js-evernote-checked” data-evernote-id=”932″>”chiaki” class=”js-evernote-checked”
data-evernote-id=”933″>,

class=”js-evernote-checked” data-evernote-id=”936″>     class=”js-evernote-checked” data-evernote-id=”937″>id class=”js-evernote-checked” data-evernote-id=”938″>”: ” class=”js-evernote-checked”
data-evernote-id=”939″>3001″

}

 

那么数量是怎么传输的为?HTTP 请求头的第一履行如下:

 

GET
/ajax/deal?callback=jsonpCallback&name=chiaki&id=3001&_=1473164876032
HTTP/1.1

 

可见,尽管格局达到是故 POST 传输一个 JSON
格式的多少,其实发送请求时要么换成 GET 请求。

 

实在假设知道 JSONP 的法则的说话虽不难领会为啥只能动用 GET
请求方法了。由于是经 script
标签举办呼吁,所以上述传输过程从达是以下的款型:

 

<script
src =
http://localhost:3001/ajax/deal?callback=jsonpCallback&name=chiaki&id=3001&\_=1473164876032'&gt;&lt;/script&gt;

 

诸如此类由服务器返回的代码就得平素以斯 script
标签中运行了。下边大家好实现一个 JSONP:

 

劳器 3000要页面的 JavaScript 代码中,只有回调函数 jsonpCallback:

 

class=”js-evernote-checked” data-evernote-id=”972″>function class=”js-evernote-checked” data-evernote-id=”973″>  class=”js-evernote-checked” data-evernote-id=”974″>jsonpCallback class=”js-evernote-checked” data-evernote-id=”975″>( class=”js-evernote-checked” data-evernote-id=”976″>data class=”js-evernote-checked” data-evernote-id=”977″>) class=”js-evernote-checked” data-evernote-id=”978″>  class=”js-evernote-checked”
data-evernote-id=”979″>{

class=”js-evernote-checked” data-evernote-id=”982″>     class=”js-evernote-checked” data-evernote-id=”983″>console class=”js-evernote-checked” data-evernote-id=”984″>. class=”js-evernote-checked” data-evernote-id=”985″>log class=”js-evernote-checked” data-evernote-id=”986″>( class=”js-evernote-checked” data-evernote-id=”987″>”jsonpCallback:
“+ class=”js-evernote-checked” data-evernote-id=”989″>data class=”js-evernote-checked” data-evernote-id=”990″>. class=”js-evernote-checked” data-evernote-id=”991″>name class=”js-evernote-checked”
data-evernote-id=”992″>)

}

 

劳务器 3000请求页面还含一个 script 标签:

 

<script
src =
http://localhost:3001/jsonServerResponse?jsonp=jsonpCallback'&gt;&lt;/script&gt;

 

服务器 3001及相应之处理函数:

 

class=”js-evernote-checked” data-evernote-id=”1011″>app class=”js-evernote-checked” data-evernote-id=”1012″>. class=”js-evernote-checked” data-evernote-id=”1013″>get class=”js-evernote-checked” data-evernote-id=”1014″>( class=”js-evernote-checked”
data-evernote-id=”1015″>’/jsonServerResponse’ class=”js-evernote-checked” data-evernote-id=”1016″>, class=”js-evernote-checked” data-evernote-id=”1017″>  class=”js-evernote-checked” data-evernote-id=”1018″>function class=”js-evernote-checked” data-evernote-id=”1019″>( class=”js-evernote-checked” data-evernote-id=”1020″>req class=”js-evernote-checked” data-evernote-id=”1021″>, class=”js-evernote-checked” data-evernote-id=”1022″>  class=”js-evernote-checked” data-evernote-id=”1023″>res class=”js-evernote-checked” data-evernote-id=”1024″>) class=”js-evernote-checked” data-evernote-id=”1025″>  class=”js-evernote-checked”
data-evernote-id=”1026″>{

class=”js-evernote-checked” data-evernote-id=”1029″>     class=”js-evernote-checked” data-evernote-id=”1030″>var class=”js-evernote-checked” data-evernote-id=”1031″>  class=”js-evernote-checked” data-evernote-id=”1032″>cb class=”js-evernote-checked” data-evernote-id=”1033″> =  class=”js-evernote-checked” data-evernote-id=”1034″>req class=”js-evernote-checked” data-evernote-id=”1035″>. class=”js-evernote-checked” data-evernote-id=”1036″>query class=”js-evernote-checked” data-evernote-id=”1037″>. class=”js-evernote-checked”
data-evernote-id=”1038″>jsonp

class=”js-evernote-checked” data-evernote-id=”1041″>     class=”js-evernote-checked” data-evernote-id=”1042″>console class=”js-evernote-checked” data-evernote-id=”1043″>. class=”js-evernote-checked” data-evernote-id=”1044″>log class=”js-evernote-checked” data-evernote-id=”1045″>( class=”js-evernote-checked” data-evernote-id=”1046″>cb class=”js-evernote-checked”
data-evernote-id=”1047″>)

class=”js-evernote-checked” data-evernote-id=”1050″>     class=”js-evernote-checked” data-evernote-id=”1051″>var class=”js-evernote-checked” data-evernote-id=”1052″>  class=”js-evernote-checked” data-evernote-id=”1053″>data class=”js-evernote-checked” data-evernote-id=”1054″> =  class=”js-evernote-checked” data-evernote-id=”1055″>’var data =
{‘ +  class=”js-evernote-checked” data-evernote-id=”1057″>’name:
$(“#name”).val() + ” – server 3001 jsonp process”,’ class=”js-evernote-checked” data-evernote-id=”1058″> +  class=”js-evernote-checked” data-evernote-id=”1059″>’id:
$(“#id”).val() + ” – server 3001 jsonp process”‘ class=”js-evernote-checked” data-evernote-id=”1060″> +  class=”js-evernote-checked”
data-evernote-id=”1061″>’};’

class=”js-evernote-checked” data-evernote-id=”1064″>     class=”js-evernote-checked” data-evernote-id=”1065″>var class=”js-evernote-checked” data-evernote-id=”1066″>  class=”js-evernote-checked” data-evernote-id=”1067″>debug class=”js-evernote-checked” data-evernote-id=”1068″> =  class=”js-evernote-checked”
data-evernote-id=”1069″>’console.log(data);’

class=”js-evernote-checked” data-evernote-id=”1072″>     class=”js-evernote-checked” data-evernote-id=”1073″>var class=”js-evernote-checked” data-evernote-id=”1074″>  class=”js-evernote-checked” data-evernote-id=”1075″>callback class=”js-evernote-checked” data-evernote-id=”1076″> =  class=”js-evernote-checked”
data-evernote-id=”1077″>’$(“#submit”).click(function() {‘ class=”js-evernote-checked” data-evernote-id=”1078″> +  class=”js-evernote-checked” data-evernote-id=”1079″>data class=”js-evernote-checked” data-evernote-id=”1080″> +  class=”js-evernote-checked” data-evernote-id=”1081″>cb class=”js-evernote-checked” data-evernote-id=”1082″> +  class=”js-evernote-checked” data-evernote-id=”1083″>'(data);’ class=”js-evernote-checked” data-evernote-id=”1084″> +  class=”js-evernote-checked” data-evernote-id=”1085″>debug class=”js-evernote-checked” data-evernote-id=”1086″> +  class=”js-evernote-checked”
data-evernote-id=”1087″>’});’

class=”js-evernote-checked” data-evernote-id=”1090″>     class=”js-evernote-checked” data-evernote-id=”1091″>res class=”js-evernote-checked” data-evernote-id=”1092″>. class=”js-evernote-checked” data-evernote-id=”1093″>send class=”js-evernote-checked” data-evernote-id=”1094″>( class=”js-evernote-checked” data-evernote-id=”1095″>callback class=”js-evernote-checked”
data-evernote-id=”1096″>)

class=”js-evernote-checked” data-evernote-id=”1099″>     class=”js-evernote-checked” data-evernote-id=”1100″>res class=”js-evernote-checked” data-evernote-id=”1101″>. class=”js-evernote-checked” data-evernote-id=”1102″>end class=”js-evernote-checked”
data-evernote-id=”1103″>()

})

 

及地点一样,大家当所抱之参数后长 “ – server 3001 jsonp process”
代表服务器对数码的操作。从代码中我么可以观看,处理函数除了因参数做相应的处理,更多之啊是进展字符串的拼凑。

 

终极的结果为:

 

图片 5

 

2.4 JSONP 总结

 

迄今,大家精晓了 JSONP
的原理同贯彻模式,它协助我们贯彻前端跨域请求,可是以执行的历程遭到,大家要可以发现它的缺乏:

 

只好采用 GET 方法发起呼吁,这是由于 script 标签自己之范围决定的。

不克杀好的发现错误,并举办处理。与 Ajax 相比,由于匪是因此XmlHttpRequest 举办传输,所以无法注册 success、 error 等事件监听函数。

 

其三、 使用
CORS 实现跨域调用

 

3.1 什么是 CORS?

 

Cross-Origin Resource
Sharing(CORS)跨域资源共享是同一客浏览器技术之业内,提供了 Web
服务没有同域传来沙盒脚本的法门,以逃避浏览器的同源策略,是 JSONP
格局的现代版。与 JSONP 不同,CORS 除了 GET 要求方法之外也协助任何的 HTTP
要求。用 CORS 可以让网页设计师用一般的
XMLHttpRequest,这种方法的错误处理比 JSONP 要来之好。另一方面,JSONP
可以以匪扶助 CORS 的老旧浏览器上运行。现代之浏览器都帮忙 CORS。

 

3.2 CORS 的实现

 

要么因 服务器 3000 上之求页面向 服务器 3001 发送请求为条例。

 

劳务器 3000 上的请求页面 JavaScript 不换,如下:

 

class=”js-evernote-checked” data-evernote-id=”1154″>$( class=”js-evernote-checked” data-evernote-id=”1155″>function class=”js-evernote-checked” data-evernote-id=”1156″>() class=”js-evernote-checked” data-evernote-id=”1157″>  class=”js-evernote-checked”
data-evernote-id=”1158″>{

class=”js-evernote-checked” data-evernote-id=”1161″>     class=”js-evernote-checked” data-evernote-id=”1162″>$( class=”js-evernote-checked” data-evernote-id=”1163″>”#submit” class=”js-evernote-checked” data-evernote-id=”1164″>). class=”js-evernote-checked” data-evernote-id=”1165″>click class=”js-evernote-checked” data-evernote-id=”1166″>( class=”js-evernote-checked” data-evernote-id=”1167″>function class=”js-evernote-checked” data-evernote-id=”1168″>() class=”js-evernote-checked” data-evernote-id=”1169″>  class=”js-evernote-checked”
data-evernote-id=”1170″>{

class=”js-evernote-checked” data-evernote-id=”1173″>         class=”js-evernote-checked” data-evernote-id=”1174″>var class=”js-evernote-checked” data-evernote-id=”1175″>  class=”js-evernote-checked” data-evernote-id=”1176″>data class=”js-evernote-checked” data-evernote-id=”1177″> =  class=”js-evernote-checked”
data-evernote-id=”1178″>{

class=”js-evernote-checked” data-evernote-id=”1181″>             class=”js-evernote-checked” data-evernote-id=”1182″>name class=”js-evernote-checked” data-evernote-id=”1183″>:  class=”js-evernote-checked” data-evernote-id=”1184″>$( class=”js-evernote-checked” data-evernote-id=”1185″>”#name” class=”js-evernote-checked” data-evernote-id=”1186″>). class=”js-evernote-checked” data-evernote-id=”1187″>val class=”js-evernote-checked”
data-evernote-id=”1188″>(),

class=”js-evernote-checked” data-evernote-id=”1191″>             class=”js-evernote-checked” data-evernote-id=”1192″>id class=”js-evernote-checked” data-evernote-id=”1193″>:  class=”js-evernote-checked” data-evernote-id=”1194″>$( class=”js-evernote-checked” data-evernote-id=”1195″>”#id” class=”js-evernote-checked” data-evernote-id=”1196″>). class=”js-evernote-checked” data-evernote-id=”1197″>val class=”js-evernote-checked”
data-evernote-id=”1198″>()

class=”js-evernote-checked” data-evernote-id=”1201″>         class=”js-evernote-checked”
data-evernote-id=”1202″>};

class=”js-evernote-checked” data-evernote-id=”1205″>         class=”js-evernote-checked” data-evernote-id=”1206″>$. class=”js-evernote-checked” data-evernote-id=”1207″>ajax class=”js-evernote-checked”
data-evernote-id=”1208″>({

class=”js-evernote-checked” data-evernote-id=”1211″>             class=”js-evernote-checked” data-evernote-id=”1212″>type class=”js-evernote-checked” data-evernote-id=”1213″>:  class=”js-evernote-checked” data-evernote-id=”1214″>’POST’ class=”js-evernote-checked”
data-evernote-id=”1215″>,

class=”js-evernote-checked” data-evernote-id=”1218″>             class=”js-evernote-checked” data-evernote-id=”1219″>data class=”js-evernote-checked” data-evernote-id=”1220″>:  class=”js-evernote-checked” data-evernote-id=”1221″>data class=”js-evernote-checked”
data-evernote-id=”1222″>,

class=”js-evernote-checked” data-evernote-id=”1225″>             class=”js-evernote-checked” data-evernote-id=”1226″>url class=”js-evernote-checked” data-evernote-id=”1227″>:  class=”js-evernote-checked”
data-evernote-id=”1228″>’http://localhost:3001/cors‘ class=”js-evernote-checked”
data-evernote-id=”1229″>,

class=”js-evernote-checked” data-evernote-id=”1232″>             class=”js-evernote-checked” data-evernote-id=”1233″>dataType class=”js-evernote-checked” data-evernote-id=”1234″>:  class=”js-evernote-checked” data-evernote-id=”1235″>’json’ class=”js-evernote-checked”
data-evernote-id=”1236″>,

class=”js-evernote-checked” data-evernote-id=”1239″>             class=”js-evernote-checked” data-evernote-id=”1240″>cache class=”js-evernote-checked” data-evernote-id=”1241″>:  class=”js-evernote-checked” data-evernote-id=”1242″>false class=”js-evernote-checked”
data-evernote-id=”1243″>,

class=”js-evernote-checked” data-evernote-id=”1246″>             class=”js-evernote-checked” data-evernote-id=”1247″>timeout class=”js-evernote-checked” data-evernote-id=”1248″>:  class=”js-evernote-checked” data-evernote-id=”1249″>5000 class=”js-evernote-checked”
data-evernote-id=”1250″>,

class=”js-evernote-checked” data-evernote-id=”1253″>             class=”js-evernote-checked” data-evernote-id=”1254″>success class=”js-evernote-checked” data-evernote-id=”1255″>:  class=”js-evernote-checked” data-evernote-id=”1256″>function class=”js-evernote-checked” data-evernote-id=”1257″>( class=”js-evernote-checked” data-evernote-id=”1258″>data class=”js-evernote-checked” data-evernote-id=”1259″>) class=”js-evernote-checked” data-evernote-id=”1260″>  class=”js-evernote-checked”
data-evernote-id=”1261″>{

class=”js-evernote-checked”
data-evernote-id=”1264″>                 class=”js-evernote-checked” data-evernote-id=”1265″>console class=”js-evernote-checked” data-evernote-id=”1266″>. class=”js-evernote-checked” data-evernote-id=”1267″>log class=”js-evernote-checked” data-evernote-id=”1268″>( class=”js-evernote-checked” data-evernote-id=”1269″>data class=”js-evernote-checked”
data-evernote-id=”1270″>)

class=”js-evernote-checked” data-evernote-id=”1273″>             class=”js-evernote-checked”
data-evernote-id=”1274″>},

class=”js-evernote-checked” data-evernote-id=”1277″>             class=”js-evernote-checked” data-evernote-id=”1278″>error class=”js-evernote-checked” data-evernote-id=”1279″>:  class=”js-evernote-checked” data-evernote-id=”1280″>function class=”js-evernote-checked” data-evernote-id=”1281″>( class=”js-evernote-checked” data-evernote-id=”1282″>jqXHR class=”js-evernote-checked” data-evernote-id=”1283″>, class=”js-evernote-checked” data-evernote-id=”1284″>  class=”js-evernote-checked” data-evernote-id=”1285″>textStatus class=”js-evernote-checked” data-evernote-id=”1286″>, class=”js-evernote-checked” data-evernote-id=”1287″>  class=”js-evernote-checked” data-evernote-id=”1288″>errorThrown class=”js-evernote-checked” data-evernote-id=”1289″>) class=”js-evernote-checked” data-evernote-id=”1290″>  class=”js-evernote-checked”
data-evernote-id=”1291″>{

class=”js-evernote-checked”
data-evernote-id=”1294″>                 class=”js-evernote-checked” data-evernote-id=”1295″>console class=”js-evernote-checked” data-evernote-id=”1296″>. class=”js-evernote-checked” data-evernote-id=”1297″>log class=”js-evernote-checked” data-evernote-id=”1298″>( class=”js-evernote-checked” data-evernote-id=”1299″>’error ‘ class=”js-evernote-checked” data-evernote-id=”1300″> +  class=”js-evernote-checked” data-evernote-id=”1301″>textStatus class=”js-evernote-checked” data-evernote-id=”1302″> +  class=”js-evernote-checked” data-evernote-id=”1303″>’ ‘ class=”js-evernote-checked” data-evernote-id=”1304″> +  class=”js-evernote-checked” data-evernote-id=”1305″>errorThrown class=”js-evernote-checked”
data-evernote-id=”1306″>);

class=”js-evernote-checked” data-evernote-id=”1309″>             class=”js-evernote-checked”
data-evernote-id=”1310″>}

class=”js-evernote-checked” data-evernote-id=”1313″>         class=”js-evernote-checked”
data-evernote-id=”1314″>});

class=”js-evernote-checked” data-evernote-id=”1317″>     class=”js-evernote-checked”
data-evernote-id=”1318″>});

});

 

服务器 3001达相应之处理函数:

 

class=”js-evernote-checked” data-evernote-id=”1329″>app class=”js-evernote-checked” data-evernote-id=”1330″>. class=”js-evernote-checked” data-evernote-id=”1331″>post class=”js-evernote-checked” data-evernote-id=”1332″>( class=”js-evernote-checked” data-evernote-id=”1333″>’/cors’ class=”js-evernote-checked” data-evernote-id=”1334″>, class=”js-evernote-checked” data-evernote-id=”1335″>  class=”js-evernote-checked” data-evernote-id=”1336″>function class=”js-evernote-checked” data-evernote-id=”1337″>( class=”js-evernote-checked” data-evernote-id=”1338″>req class=”js-evernote-checked” data-evernote-id=”1339″>, class=”js-evernote-checked” data-evernote-id=”1340″>  class=”js-evernote-checked” data-evernote-id=”1341″>res class=”js-evernote-checked” data-evernote-id=”1342″>) class=”js-evernote-checked” data-evernote-id=”1343″>  class=”js-evernote-checked”
data-evernote-id=”1344″>{

class=”js-evernote-checked” data-evernote-id=”1347″>     class=”js-evernote-checked” data-evernote-id=”1348″>res class=”js-evernote-checked” data-evernote-id=”1349″>. class=”js-evernote-checked” data-evernote-id=”1350″>header class=”js-evernote-checked” data-evernote-id=”1351″>( class=”js-evernote-checked”
data-evernote-id=”1352″>”Access-Control-Allow-Origin” class=”js-evernote-checked” data-evernote-id=”1353″>, class=”js-evernote-checked” data-evernote-id=”1354″>  class=”js-evernote-checked” data-evernote-id=”1355″>”*” class=”js-evernote-checked”
data-evernote-id=”1356″>);

class=”js-evernote-checked” data-evernote-id=”1359″>     class=”js-evernote-checked” data-evernote-id=”1360″>res class=”js-evernote-checked” data-evernote-id=”1361″>. class=”js-evernote-checked” data-evernote-id=”1362″>header class=”js-evernote-checked” data-evernote-id=”1363″>( class=”js-evernote-checked”
data-evernote-id=”1364″>”Access-Control-Allow-Headers” class=”js-evernote-checked” data-evernote-id=”1365″>, class=”js-evernote-checked” data-evernote-id=”1366″>  class=”js-evernote-checked”
data-evernote-id=”1367″>”X-Requested-With” class=”js-evernote-checked”
data-evernote-id=”1368″>);

class=”js-evernote-checked” data-evernote-id=”1371″>     class=”js-evernote-checked” data-evernote-id=”1372″>res class=”js-evernote-checked” data-evernote-id=”1373″>. class=”js-evernote-checked” data-evernote-id=”1374″>header class=”js-evernote-checked” data-evernote-id=”1375″>( class=”js-evernote-checked”
data-evernote-id=”1376″>”Access-Control-Allow-Methods” class=”js-evernote-checked” data-evernote-id=”1377″>, class=”js-evernote-checked” data-evernote-id=”1378″>  class=”js-evernote-checked”
data-evernote-id=”1379″>”PUT,POST,GET,DELETE,OPTIONS” class=”js-evernote-checked”
data-evernote-id=”1380″>);

class=”js-evernote-checked” data-evernote-id=”1383″>     class=”js-evernote-checked” data-evernote-id=”1384″>res class=”js-evernote-checked” data-evernote-id=”1385″>. class=”js-evernote-checked” data-evernote-id=”1386″>header class=”js-evernote-checked” data-evernote-id=”1387″>( class=”js-evernote-checked”
data-evernote-id=”1388″>”X-Powered-By” class=”js-evernote-checked” data-evernote-id=”1389″>, class=”js-evernote-checked” data-evernote-id=”1390″>  class=”js-evernote-checked” data-evernote-id=”1391″>’ 3.2.1′ class=”js-evernote-checked”
data-evernote-id=”1392″>)

class=”js-evernote-checked” data-evernote-id=”1395″>     class=”js-evernote-checked” data-evernote-id=”1396″>res class=”js-evernote-checked” data-evernote-id=”1397″>. class=”js-evernote-checked” data-evernote-id=”1398″>header class=”js-evernote-checked” data-evernote-id=”1399″>( class=”js-evernote-checked”
data-evernote-id=”1400″>”Content-Type” class=”js-evernote-checked” data-evernote-id=”1401″>, class=”js-evernote-checked” data-evernote-id=”1402″>  class=”js-evernote-checked”
data-evernote-id=”1403″>”application/json;charset=utf-8″ class=”js-evernote-checked”
data-evernote-id=”1404″>);

class=”js-evernote-checked” data-evernote-id=”1407″>     class=”js-evernote-checked” data-evernote-id=”1408″>var class=”js-evernote-checked” data-evernote-id=”1409″>  class=”js-evernote-checked” data-evernote-id=”1410″>data class=”js-evernote-checked” data-evernote-id=”1411″> =  class=”js-evernote-checked”
data-evernote-id=”1412″>{

class=”js-evernote-checked” data-evernote-id=”1415″>         class=”js-evernote-checked” data-evernote-id=”1416″>name class=”js-evernote-checked” data-evernote-id=”1417″>:  class=”js-evernote-checked” data-evernote-id=”1418″>req class=”js-evernote-checked” data-evernote-id=”1419″>. class=”js-evernote-checked” data-evernote-id=”1420″>body class=”js-evernote-checked” data-evernote-id=”1421″>. class=”js-evernote-checked” data-evernote-id=”1422″>name class=”js-evernote-checked” data-evernote-id=”1423″> +  class=”js-evernote-checked” data-evernote-id=”1424″>’ – server 3001
cors process’ data-evernote-id=”1425″>,

class=”js-evernote-checked” data-evernote-id=”1428″>         class=”js-evernote-checked” data-evernote-id=”1429″>id class=”js-evernote-checked” data-evernote-id=”1430″>:  class=”js-evernote-checked” data-evernote-id=”1431″>req class=”js-evernote-checked” data-evernote-id=”1432″>. class=”js-evernote-checked” data-evernote-id=”1433″>body class=”js-evernote-checked” data-evernote-id=”1434″>. class=”js-evernote-checked” data-evernote-id=”1435″>id class=”js-evernote-checked” data-evernote-id=”1436″> +  class=”js-evernote-checked” data-evernote-id=”1437″>’ – server 3001
cors
process’

class=”js-evernote-checked” data-evernote-id=”1440″>     class=”js-evernote-checked”
data-evernote-id=”1441″>}

class=”js-evernote-checked” data-evernote-id=”1444″>     class=”js-evernote-checked” data-evernote-id=”1445″>console class=”js-evernote-checked” data-evernote-id=”1446″>. class=”js-evernote-checked” data-evernote-id=”1447″>log class=”js-evernote-checked” data-evernote-id=”1448″>( class=”js-evernote-checked” data-evernote-id=”1449″>data class=”js-evernote-checked”
data-evernote-id=”1450″>)

class=”js-evernote-checked” data-evernote-id=”1453″>     class=”js-evernote-checked” data-evernote-id=”1454″>res class=”js-evernote-checked” data-evernote-id=”1455″>. class=”js-evernote-checked” data-evernote-id=”1456″>send class=”js-evernote-checked” data-evernote-id=”1457″>( class=”js-evernote-checked” data-evernote-id=”1458″>data class=”js-evernote-checked”
data-evernote-id=”1459″>)

class=”js-evernote-checked” data-evernote-id=”1462″>     class=”js-evernote-checked” data-evernote-id=”1463″>res class=”js-evernote-checked” data-evernote-id=”1464″>. class=”js-evernote-checked” data-evernote-id=”1465″>end class=”js-evernote-checked”
data-evernote-id=”1466″>()

})

 

每当服务器遇到对回到信息之要头举办了安。

 

末段之结果吗:

 

图片 6

3.3 CORS 中属性的辨析

 

  1. Access-Control-Allow-Origin

    The origin parameter specifies a URI that may access the resource.
    The browser must enforce this. For requests without credentials, the
    server may specify “*” as a wildcard, thereby allowing any origin
    to access the resource.

  2. Access-Control-Allow-Methods

    Specifies the method or methods allowed when accessing the resource.
    This is used in response to a preflight request. The conditions
    under which a request is preflighted are discussed above.

  3. Access-Control-Allow-Headers

    Used in response to a preflight request to indicate which HTTP
    headers can be used when making the actual request.

 

3.4 CORS 与 JSONP 的对比

 

  1. CORS 除了 GET 方法外,也匡助任何的 HTTP 请求方法要 POST、 PUT 等。

  2. CORS 可以下 XmlHttpRequest 进行传输,所以它们的错误处理格局于 JSONP
    好。

  3. JSONP 可以于匪援助 CORS 的老旧浏览器上运行。

 

季、
一些外的跨域调用情势

 

4.1 window.name

 

window对象有只name属性,该属性有个特征:即当一个窗口 (window)
的生命周期内,窗口载入的享有的页面都是共享一个 window.name
的,每个页面对 window.name 都起读写的权柄,window.name
是坚定不移有一个窗口载入了之持有页面被的,并无会合坐新页面的载入而进展重置。

 

4.2 window.postMessage()

 

是主意是 HTML5 的一个初特色,可以就此来为其他有的 window
对象发送音信。需要留意的是咱不能够不要力保所有的脚本执行了才发送
Message伊芙(Eve)nt,假设在函数执行的长河中调用了外,就会于后的函数超时不可能履行。

 

参考:https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

相关文章