了解跨域和常用解决方法

跨域，相信大家无论是在工作中还是在面试中都经常遇到这个问题，经常在网上看到别人整理的一些方法，好像就知道是怎么回事了，但是没有实践过，总觉得自己没有真正掌握。在这里，我通过自己认真的思考，整理出一些常用的方法。跨域的出现就不用多说了。作为前端开发者，相信大家都知道跨域是由浏览器的同源策略引起的。所谓同源，就是“协议+域名+端口”是相同的，即使两个不同的域名指向同一个IP地址，也不是同源的。浏览器引入同源策略主要是为了防止XSS和CSRF攻击。CSRF（Cross-siterequestforgery），跨站请求伪造，又名：oneclickattack/sessionriding，简称：CSRF/XSRF。在同源策略的影响下，域名A向域名B发送Ajax请求，或者操作Cookie、LocalStorage、indexDB等数据，或者操作dom、js会被限制，但是请求css和静态资源等js不受限制跨域解决方案1??通过jsonp跨域先说说jsonp的原理，比如我们平时写html的时候，经常使用toFetchingstaticresources放置在另一台服务器上不受同源策略的限制，所以我们可以利用这个来解决跨域问题。主要代码如下：1.1Native实现在www.a.com域名中写入如下代码请求www.b.com域名的数据这里，我们使用动态脚本的src属性，变相发送一个http://www.b.com/getdata?call...。这时b.com页面收到这个请求，如果没有JSONP，会正常返回json数据结果，像这样：{msg:'helloworld'}，使用JSONP，服务端会接受这个回调参数，然后用这个参数值包装要返回的数据：demo({msg:'helloworld'});这时如果a.com的页面有一个demo函数：functiondemo(res){console.log(res);}当返回远程数据时，demo函数会随着动态脚本的执行而执行。1.2jqueryajax请求实现$.ajax({url:'http://www.b.com/getdata',type:'get',dataType:'jsonp',//请求方式为jsonpjsonpCallback:'demo',//自定义回调函数名data:{}});服务端代码实现：以nodejs为例varhttp=require(http);//引入url模块解析url字符串varurl=require('url);//引入querystring模块处理查询字符串varquerystring=require('querystring');varserver=http.createServer();server.on('request',function(req,res){varurlPath=url.parse(req.url).pathname;varparam=querystring.parse(req.url.split('?')[1]);if(urlPath==='/getData'&¶m.callback){res.writeHead(200,{'Content-Type','application/json;charset=utf-8'});vardata={msg:'helloworld'};data=JSON.stringify(data);varcallback=param.callback+'('+data+');';res.write(callback);res.end();}else{res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});res.write('地狱世界\n');重发（）;}})jsonp缺点：只能使用get请求，不推荐使用2CORSCross-OriginResourceSharingCross-OriginResourceSharing(CORS)是一种机制，使用额外的HTTP头来告诉浏览器服务器允许Web在源（域）上运行的应用程序被允许访问来自不同源服务器的指定资源。跨源HTTP请求。Cross-OriginResourceSharing跨域资源共享应该算是推荐的跨域处理方案。它不仅适用于各种方法，而且更加方便和简单。目前所有浏览器都支持该功能，IE浏览器不能低于IE102.1简单请求和非简单请求浏览器将CORS请求分为两类：简单请求和非简单请求。一个简单的请求同时满足以下条件。只要不满足以下条件，就是非简单请求。非简单请求会发送预检请求，返回码为204，预检通过后才会发送真正的请求，然后返回200。这里在前端发送请求的时候添加一个额外的header来触发非简单请求。2.2使用身份凭证发出CORS请求。默认情况下，跨域请求不会向服务器发送cookie。如果是xhr，需要设置xhr.withCredentials=true。如果你使用fetch的话，需要在请求中设置credentials:'include'，但是如果服务器在预请求的时候没有返回Access-Control-Allow-Crenditials:true，那么这个cookie是不会被发送的在实际请求的时候对于server端来说，特别注意简单的get请求，不会有pre-request的过程，那么在实际请求的时候，如果server没有返回Access-Control-Allow-Creditials:true，那么响应结果浏览器不会移交给请求者对于带有凭据的请求，服务器不得将Access-Control-Allow-Origin的值设置为“*”。这是因为请求的header中携带了Cookie信息，如果Access-Control-Allow-Origin的值为“*”，请求就会失败。而是将Access-Control-Allow-Origin的值设为http://www.a.com，请求就会成功。2.3HTTP响应头字段Access-Control-Allow-Origin:|*Access-Control-Expose-Headersheader允许服务器将允许浏览器访问的headers放入白名单Access-Control-Max-Ageheader指定preflight请求的结果可以被缓存多长时间Access-Control-Allow-Credentialsheader指定当浏览器的凭据设置为true时，是否允许浏览器读取响应的内容。Access-Control-Allow-Methods标头字段用于响应预检请求。它指定实际请求允许的HTTP方法。Access-Control-Allow-Headers头字段用于响应预检请求。它规定了实际请求中允许携带的头字段。2.4以nodejsexpress为例说明如何使用cors解决跨域varexpress=require('express');varurl=require('url');varapp=express();varallowCrossDomain=function(req,res,next){res.header('Access-Control-Allow-Origin','http://localhost:63342');res.header('Access-Control-Allow-Methods','GET,PUT,POST,DELETE');res.header('Access-Control-Allow-Headers','Content-Type');res.header('Access-Control-Allow-Credentials','true');next();};app.use(allowCrossDomain);app.get('/getData',function(req,res,next){varqueryValue=url.parse(req.url).query;if(queryValue==='fortunewheel@sina.com'){res.send(true);}else{res.send(false);}});app.listen(3001);在实际开发过程中，为了安全，会和token一起使用3window.postMessagepostMessage是HTML5XMLHttpRequestLevel2中的API，是为数不多的可以跨域操作的window属性之一。可用于解决以下问题：iframe嵌套页面跨域通信页面及其开启的新窗口多窗口间通信消息间传输用法：postMessage(data,origin)方法接受两个参数，data：要获取的数据传输，html5规范支持任何基本类型或可复制对象，但有些浏览器只支持字符串，所以最好通过参数传递方便用JSON.stringify()序列化。origin：协议+主机+端口号，也可以设置为“*”，表示可以传递给任意窗口，如果要指定与当前窗口同源，设置为“/”。代码示例：http://www.a.com/a.htmlhttp://www.b.com/b.html4document.domain该方法只适用于主域名相同但子域名不同的iframe通过强制将document.domain设为基本主域实现同域js。使用方法：http://www.a.com/a.html