前端跨域的解决方案（前端跨域的解决方案包括）

什么是跨域?

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义

的。

广义的跨域：

1.)资源跳转：A链接、重定向、表单提交

2.)资源嵌入：〈script〉、〈仇1小。》等dona标签，还有样式中。nckgetrnd：""。、

@fo八七-勿”0等文件外链

3.)脚本请求：js发起的ajax请求、do^和js对象的跨域操作等

其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。

什么是同源策略？

同源策略/SOP(Sameoriginpolicy)是一种约定，由Netscape公司1995年引

入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览

器很容易受到XSS、CSFR等攻击。所谓同源是指“协议+域名+端口”三者相同，

即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

i.)Cookie,Localstorage和MdexDB无法读取2.)DOM和Js对象无法获得3.)AJAX请求不

能发送

常见跨域场景

URL说明是否允许

通信

http：//A/ww.dokvaik.cokv/ajs

kttp：//www.do3〃i八.coFvx/SJs同一域名，不同文件或路径允许

http://www.dokvtaiia.cokv/lab/c.js

http://www.domarH.com:SOOO/a.js

http：//www.dokvain.co^/bjs同一域名，不同端口不允许

kttp：//www.doi^ain.co^/a.js

kttps：//www/oMwV.coM/bjs同一域名，不同协议不允许

kttp：//www.dokvaiia.cokv/ajs

http://*2.168.4.工2/bjs域名和域名对应相同ip不允许

kttp：//www.do^vaiia.coi^/ajs

http://x.doi^aii^.coi^https://www.renrendoc.com/paper/b.js主域相同，子域不同不允许

http：//dokvaiia.cokv/cjs

kttp：//www.dokv〃Ml.co3/〃Js

kttp//www.doFv〃in2.co3/0js不同域名不允许

跨域解决方案

1、通过jsonp跨域

2、document.domain+iframe跨域

3、location.hash+iframe

4、+iframe跨域

5、postMessage跨域

6、跨域资源共享(CORS)

7、nginx代理跨域

8、nodejs中间件代理跨域

9、WebSocket协议跨域

一、通过jsonp跨域

通常为了减轻web服务器的负载，我们把js、css,img等静态资源分离到另一

台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静

态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script,再请求

一个带参网址实现跨域通信。

1.)原生实现：

varscript=docui^e^t.createElei^ei^t(,scnpt,Y

script.type='text/javascript';

//传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数

scriptsv'c=

lhttp://wA/w.do^aiv2..co^v：8020/togin?user=ad^ii^&：callback=ha^dleCallback,;

docu^ei^t.head.appe^dCkild(^crip-t);

//回调执行函数

functionhandleCallback(res){

}

</script>

服务端返回如下(返回时即执行全局函数)：

ha^dleCallback({'statusn:七小G"useL:八阳

2.)jqueryajax：

^ajax({

〃“：'〃ttp://www.doM«i八2/。小：808。//。卬认1

type:'get,

dataType:js。八p，//i疗求方式为js。八？

jsoi^pCallback:"ka^dleCal(backn,//自定义回调函数名

data:{}

!)；

3.)vue.js：

物is.物ttpjs。八p"ttp://www.d0h〃i八2.coM：8080//og2{

params：(}_,

jsoiap：'l^a^dleCaHback!

}).仍0八((％5)=>{

conos/ehttps://www.renrendoc.com/paper/og(烟)；

后端node.js代码示例:

varquerystriiag=requiref^uerystni^g,y);varhttp=Kcq〃iKe('kttp');Kserver=

http.createServerO；

request1,缶八。七'。八(req,res){

vavparaws=qs.p”He(wq.uM平生(？)［勾)；

vav仇=parakias.callback;

//jso”返回设置

丫es.wHteHead(2OO,{Cohte八t-Tgpc':比cxt/javascript'));

夕es.wHte(M+(+JSONstri^.gify(parai^s)+，)；

res.end();

})；

server/Mtc八('8080');conso/chttps://www.renrendoc.com/paper/ogCScrverisru八八以gatport808。，)；

jsonp缺点：只能实现get一种请求。

二、document.domain+iframe跨域

此方案仅限主域相同，子域不同的跨域应用场景。

实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现

了同域。

1.)父窗口：(http://www.domain.eom/a.html)

docu^ei^t.doi^,aiia='dow^aiv^.cow^^

varuser=bdnai";〈/script〉

2.)子窗口：(http://child.domain.eom/b.html)

《script)

docui^ei^t.doi^aii^='doi^aii^.coi^1;

//获取父窗口中变量

alert^getjsdatafromparent---->+wi八dow.pare八七.(AseQ〈/scHpt)

三、location.hash+iframe跨域

实现原理：a欲与b跨域相互通信，通过中间页c来实现。三个页面，不同域

之间利用iframe的location.hash传值，相同域之间直接js访问来通信。

具体实现：A域：a.html->B域：b.html->A域：c.html,a与b不同域只能通

过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c

可通过parent.parent访问a页面所有对象。

1.)a.html：(http://www.domainl.eom/a.html)

<ifrai^e.id="ifra^e"s/c=〃〃ttp:〃www.do3〃/认2.coM/bktkvU”

style="displag:八。八e;“></iFKaMe〉<scHpt>

vaviframe=dociA^ev .getEle^ei^tByld('iframe1)；

//向传hash值

setTi^vxeoutffunctioiaO(

ffmme.src=/Trame.src+，#user=〃d&ik;

)>工O。。)；

//开放给同域的回调方法

Fix八ctio八oiaCallback(re$){

alert^datafromc.htm/---->'+res);

卜/scHpt)

2.)b.html：(http://www.domain2.eom/b.html)

id=,,ifrai^eusrc-,lhttp：//A/ww.do^vai^.co^/c.hti^.lu

style=,,display：MM；,,x/ifK'akve><script>

varifrai^xe=docui^^t.getElei^ei^tByld(tifrai^e,);

//监听传来的knsk值，再传给c.kti^,1

wii^dow.oiahashcha^ge=fuMtio^.(){

/fmme.src=/frame.src+locatioi^.kash;

};</$cript>

3.)c.html：(http://www.domainl.eom/c.html)

〈script〉

//监听传来的kask值

w/认dow.on=function(){

//再通过操作同域况向3/的js回调，将结果传回

wi^dow.parei^t.pare^t.oi^CallbackChello：1+(ocatioia.hash.replaceC^use^1,n));

};</scnpt>

四、+iframe跨域

属性的独特之处：name值在不同的页面(甚至不同域名)加载后

依旧存在，并且可以支持非常长的name值(2MB)。

1.)a.html：(http://www.domainl.eom/a.html)

varproxy=fuMtioia(url,callback){

vav'state=O;

vavifrav^e=docu^.em.t.createEle^e^tCiframe1);

//加载跨域页面

ifrai^esrc=〃”；

//onload事件会触发2次，第1次加载跨域页，并留存数据于WMWOW.MHC

ifrai^c.onload=fix八cti。八(){

if(state===1){

//第2次。八bad(同域p-oxg页)成功后，读取同域wi八WOWSOMC中数据

八笈八七Wi八dow.八〃MC);

de$toryFrai^e():

}ekeif(state---o){

//第二次。八/ond(跨域页)成功后，切换到同域代理页面

ifrai^e.coiate^tVJi^dow.locatioiri=^ttpy/www.^omamlzom/proxy.htmr；

state-1;

)

)；

docu^e^t.body.appe^dCki(d(ifraKve);

//获取数据以后销毁这个释放内存；这也保证了安全(不被其他域访问)

functiondestoryFrakve(){

ifnamaco八七e八tWi八dow.doc〃MCnt.wr7'±e(〃)；

ifrnMC.contentWindow.c/osc。；

docui^e^t.body.rei^oveChild(iframe};

}

)；

//请求含域S页面数据p/oxg('kttp：〃wwwaoMai八2.coKvt/b.h±Mhfunction(data){

alert(data);

})；

2.)proxy.html：(/proxy....

中间代理页，与a.html同域，内容为空即可。

3.)b.html：(http://www.domain2.eom/b.html)

witn.d.ow.in.aiM.e=Thisisd.ata!';</script>

总结：通过iframe的sre属性由外域转向本地域，跨域数据即由iframe的

从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限

制，但同时它又是安全操作。

五、postMessage跨域

postMessage是HTML5XMLHttpRequestLevel2中的API,且是为数不多可以

跨域操作的window属性之一，它可用于解决以下方面的问题：

a.)页面和其打开的新窗口的数据传递

b.)多窗口之间消息传递

c.)页面与嵌套的iframe消息传递

d.)上面三个场景的跨域数据传递

用法：postMessage(data,origin)方法接受两个参数

data：html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字

符串，所以传参时最好用JSON.stringify()序列化。

origin：协议+主机+端口号，也可以设置为表示可以传递给任意窗口，如

果要指定和当前窗口同源的话设置为7"。

1.)a.html：(http://www.domainl.eom/a.html)

<ifrawe以+UMC"^c=nkttp：//www.dokvaiia2..coi^/b.ktkvl"

style=,,display：iaoM；l,></ifrakve><script>

varifrai<ve,=docui^ei^t.getElei^entByld(,ifra^e,);

onload=fimeti。八0(

vardata-{

iaakve:'ayi^1

)；

//向4。鹏削‘九2传送跨域数据

ifmhe.c。八teiatWi八dow.p。丸Message(JSOMst%八g啊

,http://www.^omam2.zomz);

)；

//接受d。侬川认2返回数据

wii^dow.addEvei^tListeMrCmessagejfm八ction(e){

alert^datafromdo^aii^Z---->1+e.data);

}>fake);〃scHpt>

2.)b.html：(http://www.domain2.eom/b.html)

//接收dokvua以1的数据

wii^doA/.addEve^tUsteMr('message1,fuiactio^(e){

alcrt^datafromdoi^aii^.1---->z+e.data);

vav'data-JSON.paw(e.datd);

if(data){

data.^ui^ber=16;

//处理后再发回dov^ai^r

wkdow.paYe八t.postMess«ge(JSON.stHMfg(datd),

,http://www.doi^aiial.cokv,y);

]

},fa(se);</scnpt>

六、跨域资源共享(CORS)

普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设

置，若要带cookie请求：前后端都需要设置。

需注意的是：由于同源策略的限制，所读取的cookie为跨域请求接口所在域的

cookie,而非当前页。如果想实现当前页cookie的写入，可参考下文：七、nginx

反向代理中设置proxy_cookie_d0main和八、NodeJs中间件代理中

cookieDomainRewrite参数的设置。

目前，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来

支持CORS)),CORS也已经成为主流的跨域解决方案。

1、前端设置:

1.)原生ajax

//前端设置是否带cookie

八tiak=true;

示例代码：

vavx/ir=MVJXMLHttpRequest。;//1E2/q需用兼容

//前端设置是否带cookie

xkir.witkCredei^tial^=true;

xknopWpost「〃ttp:〃www/okvuuVv2.C0HA：8O8O//ogi",true);

xkrsetR.eqiAestf-ieadeir(,Co^tei^t-Typel,'applicatioia/x-wA/w-for^-urleMod.ed,y);

xkr.se八dC(xser=〃dH/u认')；

xkr.o^eadtjstatecka^ge=fu八ctio八0(

if(xkr.readyState==4&&xhr.status==2.00)(

〃Iert(xhr.responseText);

)

)；

2.)jQueryajax

$.勾〃x({

xhrFields：(

A/itkCredentials：true//前端设置是否带cookie

crossPom^m：true,//会让请求头中包含跨域的额外信息，但不会含cookie

!)；

3.)vue框架

a.)axios设置：

axios.defaults.withCredei^tials-true

b.)vue-resource设置：

Vue.kttp.optio^s.crede^tials=true

2、服务端设置：

若后端设置成功，前端浏览器控制台则不会出现跨域报错信息，反之，说明没设

成功。

1.)Java后台:

*导入包：沁口。匕javax.servIct.http.HttpScMetRespoAse;

*接口参数中定义：HttpServletResponseresponse

//允许跨域访问的域名：若有端口需写全(协议+域名+端口)，若没有端口末尾不用加力

Access-Control-Allow%ttp：//www.d。以川'八工.com");

//允许前端带认证cookie：启用此项后，上面的域名不能为.，必须指定具体的域名，否则浏览器会提

示

respoi^sesetHeader("Access-Control-Allow-Credentials"triAe");

//提示。PTQNS预检时，后端需要设置的两个常用自定义头

%sp。八se.setHe〃der("Access-C。八卅。/-A〃ow-Headers","Co八七e八七-Tgpe/X-Requested-WitR);

2.)Nodejs后台示例：

varhttp=requireCkttp'varserver=kttp.createSe^ve^va^qs=requi^eCquerystriiag1)；

server.0八Crequest，hmetio八(req,res){

vavpostData-

//数据块接收中

req.addL-isteMrCdata1jftmeti。八(ch〃八k){

postData'+■=ckuiak;

})；

//数据接收完毕

req.addUsteMr(,eiad,,fcmcti(m(){

postData=qs.parse(postDatd);

//跨域后台设置

Access-Control-Allow-Crede^.tials,:^rue1,//后端允许发送Cookie

入ccess-C。八卅。/一A〃ow-Origi":么ttp：//www.dona川认工.conVj//允许访问

的域(协议+域名+端口)

*此处设置的cookie还是d。出川’八2的而非4。出浦八工，因为后端也不能跨域写

cooki^giM反向代理可以实现)，

*但只要dowuu'八2中写入一次cookie认证，后面的跨域接口都能从4。小。/认2中获

取cookie,从而实现所有的接口都能跨域访问

'Set-Cooki^:kn12345G;Patk=/;Do3n讥=www.doh〃，八2.co3;Http。八"

//HttpO八包的作用是让js无法读取cookie

})；

KCS.wHte(JSON.stHMfg(postDatay);

ws.e八d();

1)；

})；

scrvcH.〃stc八('8080');co八so/ehttps://www.renrendoc.com/paper/ogCServerisrulingatport8080.」)；

七、nginx代理跨域

1、nginx配置解决iconfont跨域

浏览器跨域访问js、css、img等常规静态资源被同源策略许可，但iconfont字

体文件(eot|otf|ttf|woff|svg)例外，此时可在nginx的静态资源服务器中加入以下

配置。

location/{

add_headerAccess-Control-AKOA/-Origin*;

}

2、nginx反向代理接口跨域

跨域原理：同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器

端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也

就不存在跨越问题。

实现思路：通过nginx配置一个代理服务器(域名与domainl相同，端口不同)

做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain

信息，方便当前域cookie写入，实现跨域登录。

nginx具体配置：

服务器server{

listen8X;

mewww/ow〃M工.COHA;

location/(

proxy_passHtp：//www.do3〃/h2.cotv：808。；#反向代理

proxy_cookie_d.oi^aii^www.dowA川认2.COMwww.do3〃以工.COMA;#修改cookie里域名

index/index.k也M;

#当用we切力ck-dc—server等中间件代理接口访问八ig八x时，此时无浏览器参与，故没

有同源限制，下面的跨域配置可不启用

add_headerAccess-Control-Aaow-On0以Mttp://www.^omamXzom;#"［前布只

跨域不带cookie.时，可为*

add_keaderAccess-Control-Credentialstrue;

1.)前端代码示例：

varxhr=MVJXMLHttpR^^uestO；

//前端开关：浏览器是否读写co。％。

乂hr.withCKcdentiak=true;

//访问八gi八x中的代理服务器

xk/.ope八Cget-http：〃www.doFv川认：L.C03：82/?〃ser=adkvuK_,true);

xhcse八40；

2.)Nodejs后台示例：

varhttp=requireChttp^varserver=http.createSe^ver(varqs=require(,querystrii^g,);

server。八Creq〃estlfuMtioi<(req,res){

vairparams=qs.parse(req.url.substri^g(2.));

//向前台写cookie

'S况-Cook/0:协二/;D。侬加认二www.donani八2.C03；Http。八包'//

Http。八/g：脚本无法读取

})；

r^.write(JSONstri^gify(parai^s));

ws.e八d();

!)；

server.〃stenC8080);conso/ehttps://www.renrendoc.com/paper/og(ScrvcKisnxrmi八gatport8080.」)；

八、Nodejs中间件代理跨域

node中间件实现跨域代理，原理大致与nginx相同，都是通过启一个代理服务

器，实现数据的转发，也可以通过设置cookieDomainRewrite参数修改响应头

中cookie中域名，实现当前域的cookie写入，方便接口登录认证。

1、非vue框架的跨域(2次跨域)

利用node+express+http-proxy-middleware搭建一个proxy服务器。

1.)前端代码示例：

vavxhr=MWXMLHttpRequest。;

//前端开关：浏览器是否读写cookie

xkK.w/'thCredc八tiHs=true;

//访问http-proxy-middleware代理服务器

xhr.ope^Cgetjkttp：//wwA/.do^ai^.co^：3000/logii^?user=adi^iiaJtrue);

xkr.se八W();

2.)中间件服务器：

vavexpress=%q〃"eCexp%ss')"〃匕proxy=-proxy-^iddleware');yarapp=

cxpressO；

app.use('/'jproxy([

//代理跨域目标接口

target:'http：//www.do^.ai^2..co^.：8C>SOl,

c〃Mge。的i八：true,

//修改响应头信息，实现跨域并允许带cookie

o八ProxgRes:八ctio八(proxgRes,-cq,res){

res.heade^1Access-Control-Allow-0^1^,'http^/www.do^ai^t-.co^1);

KCS.ke〃dcK('Acccss-ContKo/-A"ow-CKedenti^k「'tr(xe');

//修改响应信息中的cookie域名

cookieDoHM，八Rewrite:'www.doFvuu'八工.COHA'//可以为fake,表示不修改

}))；

app.liste八（：5000）;co八sole.logCPsxgserver/$listenatport'5OOO..!）

3.）Nodejs后台同（六：nginx）

2、vue框架的跨域（1次跨域）

利用node+webpack+webpack-dev-server代理接口跨域。在开发环境下，由

于vue渲染服务和接口代理服务都是webpack-dev-server同一个，所以页面与

代理接口之间不再跨域，无须设置headers跨域信息了。

webpack.config.js部分配置：

hodu/e.exports={

e八卅g：&

module:&

dcvServer:{

historyApiFallback:true,

psa）：[{

co八text:，/logic,

target:仇ttp:〃www.doh〃玩Z.COHA：808。，//代理跨域目标接lI

chaiageOrigii^:true,

secure：false,//当代理某些https服务报错时用

前端跨域的解决方案（前端跨域的解决方案包括）

相关推荐