资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/关于跨域问题

关于跨域问题

ZoomQuiet / 1099人阅读

摘要：面试必考题吧，所以在这会详细介绍以下内容跨域产生的原因罗列最常用的解决方法分析各种方法原理罗列各种方法优缺点什么是跨域由于浏览器厂商对安全性的考虑，提出了浏览器的同源策略做为解决方案。

面试必考题吧，所以在这会详细介绍以下内容

跨域产生的原因

罗列最常用的解决方法

分析各种方法原理

罗列各种方法优缺点

什么是跨域

由于浏览器厂商对安全性的考虑，提出了浏览器的同源策略做为解决方案。它是一个用于隔离潜在恶意文件的重要安全机制。同源即协议、域名、端口三者一致。不同源即跨域。

如果没有同源策略会怎么样？

比如：当你访问了 饼夕夕的网站

</>复制代码 
  1. // HTML
  2. // 饼夕夕.com 内嵌 拼多多.com
  4. // JS
  5. // 由于没有同源策略的限制，钓鱼网站可以直接拿到别的网站的Dom
  6. // 所以 饼夕夕.com 可以在 拼多多.com 输入账号密码处埋点
  7. const $iframe = window.frames["pinduoduo"];
  8. const $pwd = $iframe.document.getElementById("password");
  9. console.log(`你的密码已泄露: ${$pwd}`)
解决方案（主流）

1. JSONP -> get请求跨域
原理：script和img等标签没有跨域限制
实现方案：(举例)

</>复制代码 
  1.   // HTML 插入标签
  2.   
  3.   // JS
  4.   function say(name, age) {
  5.     console.log(`${name}, ${age} 岁`)
  6.   }
  7.   // 服务器返回response
  8.   say("zmz", 18)
  9.   // 那么客户端在script onload时会执行say方法
  10.   // 结束

2. iframe+form实现post请求跨域
原理：利用form表单target属性，将post请求提交给隐藏的iframe，使页面不跳转

</>复制代码 
  1.   var data = {
  2.     name: "zmz",
  3.     age: 18
  4.   }
  5.   var url = "http://localhost/say";
  6.   var $iframe = document.createElement("iframe");
  7.   $iframe.name = "iframePost";
  8.   $iframe.style.display = "none";
  9.   document.body.appendChild($iframe);
  10.   
  11.   $iframe.addEventListener("load", function(e) {
  12.     console.log($iframe.contentWindow)
  13.   })
  14.   
  15.   const form = document.createElement("form");
  16.   const ipt = document.createElement("input");
  17.   form.action = url;
  18.   form.enctype = "application/json;"
  19.   form.method = "post";
  20.   // 最核心的一行代码
  21.   // 在指定的iframe中执行form
  22.   form.target = $iframe.name;
  23.   for (var name in data) {
  24.       ipt.name = name;
  25.       ipt.value = data[name]; 
  26.       form.appendChild(ipt.cloneNode());
  27.   }
  28.   form.style.display = "none";
  29.   document.body.appendChild(form);
  30.   form.submit();
  31.   
  32.   document.body.removeChild(form)

3. CORS 跨源资源共享
原理：新版XMLHttpRequest(ajax2.0)特性，服务器白名单
服务器端设置response.setHeader("Access-Control-Allow-xxx...

附：ajax2.0新特性

可以设置HTTP请求的时限xhr.timeout

可以使用FormData对象管理表单数据

可以上传文件 >> 同上

可以请求不同域名下的数据（跨域请求）

可以获取服务器端的二进制数据xhr.responseType = "blob"

可以获得数据传输的进度信息 xhr.upload.process

CORS分类

简单请求(自行搜索)

在请求头信息中指定Origin

非简单请求

会发送预检请求(options)，返回状态码204

5. 代理
原理：服务器之间没有跨域限制
具体实现：

</>复制代码 
  1.   // Nginx配置
  2.   server{
  3.     # 监听9099端口
  4.     listen 9099;
  5.     # 域名是localhost
  6.     server_name localhost;
  7.     # 匹配到都转发到http://localhost:9871 
  8.     location ^~ /api {
  9.         proxy_pass http://localhost:9871;
  10.     }    
  11. }

5. postMessage
原理：postMessage可以处理各种浏览器窗口之间的通信问题。
具体实现：

</>复制代码 
  1.   // 发送方
  2.   window.frames["crossDomainIframe"]
  3.   iframe.postMessage("我想要数据", "http://localhost:8088")
  4.   window.addEventListener("message", function () {
  5.     if (e.origin === "http://localhost:2333") {
  6.       console.log("收到", e.data)
  7.     }
  8.   }
  9.   // 接收方
  10.   window.addEventListener("message", (e) => {
  11.     if (e.origin === "http://localhost:8088") {
  12.       console.log(e.data)
  13.       e.source.postMessage("给，你要的数据", e.origin);
  14.     }
  15.   })

6. WebSocket
原理：新协议(socket)
实现方案：类似postMessage
附：

socket.io框架能解决兼容性问题

各种方式对比

JSONP和iframe+from兼容性很好

但是错误处理和RESTful接口统一是个问题

CORS最简单粗暴

9102年了。微软都不维护Win7了。

代理

肯定会慢一丢丢咯，而且要找运维配

postMessage

处理窗口间通信，- -。不嫌麻烦可以用来跨域

WebSocket

处理长连接，附带跨域

End 
</>复制代码 
  1. 文章分享同步于： https://github.com/zhongmeizh...
GPU云服务器 云服务器 跨域问题 cdn跨域问题 javascript跨域问题 js跨域问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103003.html

相关文章

  • 20K前端大佬面试(关于如何回答ajax跨域问题)

    摘要：在接触前端开发起，跨域这个词就一直以很高的频率在我们学习工作中重复出现，最近在工作中遇到了跨域的相关问题，这里我把它总结记录一下。 在接触前端开发起，跨域这个词就一直以很高的频率在我们学习工作中重复出现，最近在工作中遇到了跨域的相关问题，这里我把它总结记录一下。关于跨域，有N种类型，现在我只专注于ajax请求跨域(ajax跨域只是属于浏览器同源策略中的一部分,其它的这里不做介绍)，内容...

    Yangyang 评论0 收藏0

  • 关于vue-resource在dev环境下跨域问题的解决方法

    摘要：跨域问题相信跨域问题是每个前端在请求中都会遇到的问题因为浏览器的同源策略的限制所以是不支持跨域的当然当后台在没有完成搭建的时候这时候我们需要使用到模拟数据的时候这时候很多的就会出现跨域问题在中当然这个问题也不例外如下所以在此我也就整理出了 跨域问题 相信跨域问题是每个前端在ajax请求中都会遇到的问题,因为浏览器的同源策略的限制,所以ajax是不支持跨域的,当然当后台在没有完成搭建的...

    timger 评论0 收藏0

  • 关于跨域

    摘要：服务端接收到请求后，通过该参数获得回调函数名，并将数据放在参数中将其返回收到结果后因为是标签，所以浏览器会当做是脚本进行运行，从而达到跨域获取数据的目的。 在使用Vue搭建的一个后端管理系统中，我使用axios请求本地的Node环境下的接口，但是请求失败，然后我错误信息是：showImg(https://segmentfault.com/img/remote/1460000018521...

    AlexTuan 评论0 收藏0

  • 关于跨域问题

    摘要：面试必考题吧，所以在这会详细介绍以下内容跨域产生的原因罗列最常用的解决方法分析各种方法原理罗列各种方法优缺点什么是跨域由于浏览器厂商对安全性的考虑，提出了浏览器的同源策略做为解决方案。 面试必考题吧，所以在这会详细介绍以下内容 跨域产生的原因 罗列最常用的解决方法 分析各种方法原理 罗列各种方法优缺点 什么是跨域 由于浏览器厂商对安全性的考虑，提出了浏览器的同源策略做为解决方案。它...

    livem 评论0 收藏0

发表评论

登陆后可评论

0条评论

ZoomQuiet

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<