大家好,我是林三心。用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初衷。
咱们做前端的,平时跟后端对接接口那是必须的事情,但是可能很多同学忽略了一个对接过程中可能会发生的问题——跨域,那跨域到底是啥呢?为什么会跨域呢?又怎么才能解决呢?
为什么会出现跨域问题呢?那就不得不讲浏览器的同源策略了,它规定了协议号-域名-端口号这三者必须都相同才符合同源策略
如有有一个不相同,就会出现跨域问题,不符合同源策略导致的后果有
1、LocalStorge、SessionStorge、Cookie等浏览器内存无法跨域访问
2、DOM节点无法跨域操作
3、Ajax请求无法跨域请求
注意点:一个IP是可以注册多个不同域名的,也就是多个域名可能指向同一个IP,即使是这样,他们也不符合同源策略
跨域发生在什么时候呢?我考过很多位同学,得到了两种答案
1、请求一发出就被浏览器的跨域报错拦下来了(大多数人回答)
2、请求发出去到后端,后端返回数据,在浏览器接收后端数据时被浏览器的跨域报错拦下来
那到底是哪种呢?我们可以验证下,咱们先npminodemon-g,然后创建一个index.js,然后nodemonindex起一个node服务
//index.jshttp://127.0.0.1:8000consthttp=require('http');constport=8000;http.createServer(function(req,res){const{query}=urllib.parse(req.url,true);console.log(query.name)console.log('到后端喽')res.end(JSON.stringify('林三心'));}).listen(port,function(){console.log('serverislisteningonport'+port);})再创建一个index.html,用来写前端的请求代码,咱们就写一个简单的AJAX请求吧
//index.htmlhttp://127.0.0.1:5500/index.html<script>//步骤一:创建异步对象varajax=newXMLHttpRequest();//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数ajax.open('get','http://127.0.0.1:8000?name=前端过来的林三心');//步骤三:发送请求ajax.send();//步骤四:注册事件onreadystatechange状态改变就会调用ajax.onreadystatechange=function(){if(ajax.readyState==4&&ajax.status==200){//步骤五如果能够进到这个判断说明数据完美的回来了,并且请求的页面是存在的console.log(ajax.responseText);//输入相应的内容}}</script>最终,前端确实是跨域报错了。但这不是结果,我们要想知道是哪一个答案,关键在于看后端的node服务那里有没有输出,就一目了然了。所以,答案2才是对的。
前面提到了同源策略,满足协议号-域名-端口号这三者都相同就是同域,反之就是跨域,会导致跨域报错,下面通过几个例子让大家巩固一下对同域和跨域的认识把!
跨域其实是一个很久的问题了,对应的解决方案也有很多,一起接着往下读吧!!!
JSONP前面咱们说了,因为浏览器同源策略的存在,导致存在跨域问题,那有没有不受跨域问题所束缚的东西呢?其实是有的,以下这三个标签加载资源路径是不受束缚的
1、script标签:<scriptsrc="加载资源路径"></script>
2、link标签:<linkherf="加载资源路径"></link>
3、img标签:<imgsrc="加载资源路径"></img>
而JSONP就是利用了script的src加载不受束缚,从而可以拥有从不同的域拿到数据的能力。但是JSONP需要前端后端配合,才能实现最终的跨域获取数据。
JSONP通俗点说就是:利用script的src去发送请求,将一个方法名callback传给后端,后端拿到这个方法名,将所需数据,通过字符串拼接成新的字符串callback(所需数据),并发送到前端,前端接收到这个字符串之后,就会自动执行方法callback(所需数据)。老规矩,先上图,再上代码。
后端代码
//index.jshttp://127.0.0.1:8000consthttp=require('http');consturllib=require('url');constport=8000;http.createServer(function(req,res){const{query}=urllib.parse(req.url,true);if(query&&query.callback){const{name,age,callback}=queryconstperson=`${name}今年${age}岁啦!!!`conststr=`${callback}(${JSON.stringify(person)})`//拼成callback(data)res.end(str);}else{res.end(JSON.stringify('没东西啊你'));}}).listen(port,function(){console.log('serverislisteningonport'+port);})前端代码
//index.htmlhttp://127.0.0.1:5500/index.htmlconstjsonp=(url,params,cbName)=>{returnnewPromise((resolve,reject)=>{constscript=document.createElement('script')window[cbName]=(data)=>{resolve(data)document.body.removeChild(script)}params={...params,callback:cbName}constarr=Object.keys(params).map(key=>`${key}=${params[key]}`)script.src=`${url}?${arr.join('&')}`document.body.appendChild(script)})}jsonp('http://127.0.0.1:8000',{name:'林三心',age:23},'callback').then(data=>{console.log(data)//林三心今年23岁啦!!!})JSONP的缺点就是,需要前后端配合,并且只支持get请求方法
WebSocketWebSocket是什么东西?其实我也不怎么懂,但是我也不会像别人一样把MDN的资料直接复制过来,因为复制过来相信大家也是看不懂的。
我理解的WebSocket是一种协议(跟http同级,都是协议),并且他可以进行跨域通信,为什么他支持跨域通信呢?我这里找到一篇文章WebSocket凭啥可以跨域?,讲的挺好
后端代码
先安装npmiws
//index.jshttp://127.0.0.1:8000constWebsocket=require('ws');constport=8000;constws=newWebsocket.Server({port})ws.on('connection',(obj)=>{obj.on('message',(data)=>{data=JSON.parse(data.toString())const{name,age}=dataobj.send(`${name}今年${age}岁啦!!!`)})})前端代码
//index.htmlhttp://127.0.0.1:5500/index.htmlfunctionmyWebsocket(url,params){returnnewPromise((resolve,reject)=>{constsocket=newWebSocket(url)socket.onopen=()=>{socket.send(JSON.stringify(params))}socket.onmessage=(e)=>{resolve(e.data)}})}myWebsocket('ws://127.0.0.1:8000',{name:'林三心',age:23}).then(data=>{console.log(data)//林三心今年23岁啦!!!})结果如下
Cors,全称是Cross-OriginResourceSharing,意思是跨域资源共享,Cors一般是由后端来开启的,一旦开启,前端就可以跨域访问后端。
为什么后端开启Cors,前端就能跨域请求后端呢?我的理解是:前端跨域访问到后端,后端开启Cors,发送Access-Control-Allow-Origin:域名字段到前端(其实不止一个),前端浏览器判断Access-Control-Allow-Origin的域名如果跟前端域名一样,浏览器就不会实行跨域拦截,从而解决跨域问题。
后端代码
//index.jshttp://127.0.0.1:8000consthttp=require('http');consturllib=require('url');constport=8000;http.createServer(function(req,res){//开启Corsres.writeHead(200,{//设置允许跨域的域名,也可设置*允许所有域名'Access-Control-Allow-Origin':'http://127.0.0.1:5500',//跨域允许的请求方法,也可设置*允许所有方法"Access-Control-Allow-Methods":"DELETE,PUT,POST,GET,OPTIONS",//允许的header类型'Access-Control-Allow-Headers':'Content-Type'})const{query:{name,age}}=urllib.parse(req.url,true);res.end(`${name}今年${age}岁啦!!!`);}).listen(port,function(){console.log('serverislisteningonport'+port);})前端代码
//index.htmlhttp://127.0.0.1:5500/index.html//步骤一:创建异步对象varajax=newXMLHttpRequest();//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数ajax.open('get','http://127.0.0.1:8000?name=林三心&age=23');//步骤三:发送请求ajax.send();//步骤四:注册事件onreadystatechange状态改变就会调用ajax.onreadystatechange=function(){if(ajax.readyState==4&&ajax.status==200){//步骤五如果能够进到这个判断说明数据完美的回来了,并且请求的页面是存在的console.log(ajax.responseText);//输入相应的内容}}结果如下
还是回到同源策略,同源策略它只是浏览器的一个策略而已,它是限制不到后端的,也就是前端-后端会被同源策略限制,但是后端-后端则不会被限制,所以可以通过Node接口代理,先访问已设置Cors的后端1,再让后端1去访问后端2获取数据到后端1,后端1再把数据传到前端
后端2代码
//index.jshttp://127.0.0.1:8000consthttp=require('http');consturllib=require('url');constport=8000;http.createServer(function(req,res){console.log(888)const{query:{name,age}}=urllib.parse(req.url,true);res.end(`${name}今年${age}岁啦!!!`)}).listen(port,function(){console.log('serverislisteningonport'+port);})创建一个index2.js,并nodmeonindex2.js
后端1代码
//index2.jshttp://127.0.0.1:8888consthttp=require('http');consturllib=require('url');constquerystring=require('querystring');constport=8888;http.createServer(function(req,res){//开启Corsres.writeHead(200,{//设置允许跨域的域名,也可设置*允许所有域名'Access-Control-Allow-Origin':'http://127.0.0.1:5500',//跨域允许的请求方法,也可设置*允许所有方法"Access-Control-Allow-Methods":"DELETE,PUT,POST,GET,OPTIONS",//允许的header类型'Access-Control-Allow-Headers':'Content-Type'})const{query}=urllib.parse(req.url,true);const{methods='GET',headers}=reqconstproxyReq=http.request({host:'127.0.0.1',port:'8000',path:`/?${querystring.stringify(query)}`,methods,headers},proxyRes=>{proxyRes.on('data',chunk=>{console.log(chunk.toString())res.end(chunk.toString())})}).end()}).listen(port,function(){console.log('serverislisteningonport'+port);})前端代码
//index.htmlhttp://127.0.0.1:5500/index.html<script>//步骤一:创建异步对象varajax=newXMLHttpRequest();//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数ajax.open('get','http://127.0.0.1:8000?name=前端过来的林三心');//步骤三:发送请求ajax.send();//步骤四:注册事件onreadystatechange状态改变就会调用ajax.onreadystatechange=function(){if(ajax.readyState==4&&ajax.status==200){//步骤五如果能够进到这个判断说明数据完美的回来了,并且请求的页面是存在的console.log(ajax.responseText);//输入相应的内容}}</script>0结果如下
其实Nginx跟Node接口代理是一个道理,只不过Nginx就不需要我们自己去搭建一个中间服务
先下载nginx,然后将nginx目录下的nginx.conf修改如下:
//index.htmlhttp://127.0.0.1:5500/index.html<script>//步骤一:创建异步对象varajax=newXMLHttpRequest();//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数ajax.open('get','http://127.0.0.1:8000?name=前端过来的林三心');//步骤三:发送请求ajax.send();//步骤四:注册事件onreadystatechange状态改变就会调用ajax.onreadystatechange=function(){if(ajax.readyState==4&&ajax.status==200){//步骤五如果能够进到这个判断说明数据完美的回来了,并且请求的页面是存在的console.log(ajax.responseText);//输入相应的内容}}</script>1最后通过命令行nginx-sreload启动nginx
后端代码
//index.htmlhttp://127.0.0.1:5500/index.html<script>//步骤一:创建异步对象varajax=newXMLHttpRequest();//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数ajax.open('get','http://127.0.0.1:8000?name=前端过来的林三心');//步骤三:发送请求ajax.send();//步骤四:注册事件onreadystatechange状态改变就会调用ajax.onreadystatechange=function(){if(ajax.readyState==4&&ajax.status==200){//步骤五如果能够进到这个判断说明数据完美的回来了,并且请求的页面是存在的console.log(ajax.responseText);//输入相应的内容}}</script>2前端代码
//index.htmlhttp://127.0.0.1:5500/index.html<script>//步骤一:创建异步对象varajax=newXMLHttpRequest();//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数ajax.open('get','http://127.0.0.1:8000?name=前端过来的林三心');//步骤三:发送请求ajax.send();//步骤四:注册事件onreadystatechange状态改变就会调用ajax.onreadystatechange=function(){if(ajax.readyState==4&&ajax.status==200){//步骤五如果能够进到这个判断说明数据完美的回来了,并且请求的页面是存在的console.log(ajax.responseText);//输入相应的内容}}</script>0结果如下
场景:http://127.0.0.1:5500/index.html页面中使用了iframe标签内嵌了一个http://127.0.0.1:5555/index.html的页面
虽然这两个页面存在于一个页面中,但是需要iframe标签来嵌套才行,这两个页面之间是无法进行通信的,因为他们端口号不同,根据同源策略,他们之间存在跨域问题
那应该怎么办呢?使用postMessage可以使这两个页面进行通信
logo设计
创造品牌价值
¥500元起
APP开发
量身定制,源码交付
¥2000元起
商标注册
一个好品牌从商标开始
¥1480元起
公司注册
注册公司全程代办
¥0元起
查
看
更
多