加入收藏 | 设为首页 | 会员中心 | 我要投稿 晋中站长网 （https://www.0354zz.com/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 运营中心 > 建站资源 > 优化 > 正文

前端开发 | 那些年曾谈起的跨域

发布时间：2019-06-21 20:08:37 所属栏目：优化 来源：Aaron
导读：对于前端开发来说跨域应该是最不陌生的问题了，无论是开发过程中还是在面试过程中都是一个经常遇到的一个问题，在开发过程中遇到这个问题的话一般都是找后端同学去解决，以至于很多人都忽略了对跨域的认识。为什么会导致跨域？遇到跨域又怎么去解决呢？本

http://localhost:7000/b.html

  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>无</title>  
  6. </head>  
  7. <body>  
  8. <div id="message">  
  9.     Hello World!  
  10. </div>  
  11. <script>  
  12. window.onload = function() {  
  13.     var messageEle = document.getElementById('message');  
  14.     window.addEventListener('message', function (e) {  
  15.         if (e.origin !== "http://localhost:6000") {  
  16.             return;  
  17.         }  
  18.         messageEle.innerHTML = "从"+ e.origin +"收到消息： " + e.data;  
  19.     });  
  20. }  
  21. </script>  
  22. </body>  
  23. </html>  

这样我们就可以接收任何窗口传递来的消息了，为了安全起见，我们利用这时候的MessageEvent对象判断了一下消息源，MessageEvent对象，这个对象中包含很多东西。

  1. data：顾名思义，是传递来的message
  2. source：发送消息的窗口对象
  3. origin：发送消息窗口的源（协议+主机+端口号）

使用postMessage方法比以上方法用起来要轻便，不必有太多的繁琐操作，可以说postMessage是对于解决跨域来说是一个比较好的解决方案，不会显得代码特别的臃肿，并且各个浏览器又有良好的支持。

跨域资源共享(CORS)

CORS：全称"跨域资源共享"（Cross-origin resource sharing）。CORS需要浏览器和服务器同时支持，才可以实现跨域请求，目前几乎所有浏览器都支持CORS，IE则不能低于IE10。CORS的整个过程都由浏览器自动完成，前端无需做任何设置，跟平时发送ajax请求并无差异。CORS的关键在于服务器，只要服务器实现CORS接口，就可以实现跨域通信。

跨域资源共享(CORS) 是一种机制，它使用额外的HTTP头来告诉浏览器让运行在一个origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域HTTP请求。在上面说过src是不受同源策略限制的，但是出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。例如，XMLHttpRequest和FetchAPI遵循同源策略。这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非响应报文包含了正确CORS响应头。

所有CORS相关的的头都是Access-Control为前缀的。下面是每个头的一些细节。

  1. import express from "express";  
  2. import cors from "cors";  
  3. const app = express()  
  4. const  
  5. var corsOptions = {  
  6.   origin: 'http://example.com',  
  7.   optionsSuccessStatus: 200  
  8. }  
  9. app.get('/products/:id', cors(corsOptions), (req, res, next) => {  
  10.   res.json({msg: 'This is CORS-enabled for only example.com.'})  
  11. })  
  12. app.listen(80, function () {  
  13.   console.log('启用corba,端口:80')  
  14. })  

使用CORS简单请求，非常容易，对于前端来说无需做任何配置，与发送普通ajax请求无异。唯一需要注意的是，需要携带cookie信息时，需要将withCredentials设置为true即可。CORS的配置，完全在后端设置，配置起来也比较容易，目前对于大部分浏览器兼容性也比较好，现在应用最多的就是CORS解决跨域了。

WebSocket协议跨域

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
相关内容
    推荐文章
    站长推荐
    热点阅读

      【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

      建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

      Copygight © 2008-2022 https://www.0354zz.com/ All Rights Reserved. 晋中站长网