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

发布时间：2019-06-21 21:01:41 所属栏目：建站来源：Aaron

导读：对付前端开拓来说跨域应该是最不生疏的题目了，无论是开拓进程中照旧在口试进程中都是一个常常碰着的一个题目，在开拓进程中碰着这个题目的话一样平常都是找后端同窗去办理，以至于许多人都忽略了对跨域的熟悉。为什么会导致跨域？碰着跨域又怎么去办理呢？本

http://localhost:7000/b.html

<!DOCTYPE HTML>  
<html>  
<head>  
<meta charset="utf-8">  
<title>无</title>  
</head>  
<body>  
<div id="message">  
    Hello World!  
</div>  
<script>  
window.onload = function() {  
    var messageEle = document.getElementById('message');  
    window.addEventListener('message', function (e) {  
        if (e.origin !== "http://localhost:6000") {  
            return;  
        }  
        messageEle.innerHTML = "从"+ e.origin +"收到动静： " + e.data;  
    });  
}  
</script>  
</body>  
</html>

这样我们就可以吸取任何窗口转达来的动静了，为了安详起见，我们操作这时辰的MessageEvent工具判定了一下动静源，MessageEvent工具，这个工具中包括许多对象。

data：顾名思义，是转达来的message
source：发送动静的窗口工具
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为前缀的。下面是每个头的一些细节。

import express from "express";  
import cors from "cors";  
const app = express()  
const  
var corsOptions = {  
  origin: 'http://example.com',  
  optionsSuccessStatus: 200  
}  
app.get('/products/:id', cors(corsOptions), (req, res, next) => {  
  res.json({msg: 'This is CORS-enabled for only example.com.'})  
})  
app.listen(80, function () {  
  console.log('启用corba,端口:80')  
})

行使CORS简朴哀求，很是轻易，对付前端来说无需做任何设置，与发送平凡ajax哀求无异。独一必要留意的是，必要携带cookie信息时，必要将withCredentials配置为true即可。CORS的设置，完全在后端配置，设置起来也较量轻易，今朝对付大部门赏识器兼容性也较量好，此刻应用最多的就是CORS办理跨域了。

WebSocket协议跨域

（编辑：湖南网）

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

11/15

首页

尾页

SEO排名难做的四大原因	在保持网站优化的同时
网站SEO优化的几个技巧	网站原创内容怎么写？