跨域问题？同源策略大全 点击关注公众号，“技术干货”及时达！ 前言：跨域与同源策略「跨域」：通常出现在Web开发中，特别是在涉及到Ajax请求或Fetch API调用时，当一个网页尝试从不同的源加载资源时，就会遇到跨域问题。这里所说的“不同的源”，是指请求资源的源（由协议、域名和端口号组成）与提供资源的源不一致。 ?http:// 192.168.3.1 :3000 /home 协议(http), 域名(192.168.3.1), 端口(3000), 路径(/home) ?「同源策略」：是为了保护用户的隐私和数据安全，如果没有同源策略，恶意网站可以通过脚本非法获取其他网站上的敏感数据，所以浏览器会通过实施同源策略来限制不同源之间的直接通信。同时，也有些特别的情况是不受同源策略限制的，比如： ?img标签下的 link标签下的 script标签下的 ? JSONP实现同源「借助script标签的src属性不受同源策略的影响来发送请求」 「给后端携带一个参数 callback 并在前端定义 callback 函数体」 「后端返回 callback 的调用形式并将要响应的值作为 callback 函数的参数」 「当浏览器接收到响应后，就会触发全局的 callback 函数，从而让 callback 以参数的形式接收后端的响应」 前端代码script function jsonp(url, cb) { return new Promise((resolve, reject) = { const script = document.createElement('script'); // 注册一个全局的回调函数 window[cb] = function(data) { resolve(data); }; // 设置脚本标签的src属性为请求的URL，并附加一个回调参数 script.src = `${url}?cb=${cb}`; // 将脚本标签添加到body中，触发异步请求 document.body.appendChild(script); }); } // 使用jsonp函数发起请求 jsonp('http://localhost:3000', 'callback').then(res = { console.log(res); // 在控制台输出结果 });/script后端代码const http = require('http'); // 创建一个HTTP服务器实例，并指定一个处理请求的回调函数http.createServer(function(req, res) { // 解析请求的URL，并获取查询参数 const query = new URL(req.url, `http://${req.headers.host}`).searchParams; // 检查查询参数中是否包含'cb'（callback） if (query.get('cb')) { // 获取回调函数名 const cb = query.get('cb'); // 例如：'callback' // 准备要返回的数据 const data = 'hello world'; // 构造JSONP格式的字符串，格式为：callback("hello world") const result = `${cb}("${data}")`; res.end(result); }}).listen(3000);「但使用这种方法实现同源有两个缺点：」 需要后端配合只支持 get 请求cors实现同源核心思想是后端通过Access-Control-Allow-Origin设置响应头来指定允许的域名，以此来通知浏览器此时同源策略不生效 前端代码 script const xhr = new XMLHttpRequest(); xhr.open('GET', 'http://localhost:3000'); xhr.send(); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } } /script后端代码const http = require('http'); // 创建一个HTTP服务器实例，并指定一个处理请求的回调函数http.createServer((req, res) = { // 设置响应头的状态码为200，表示成功 res.writeHead(200, { // 设置Access-Control-Allow-Origin响应头，允许来自'http://127.0.0.1:5500'的请求 'Access-Control-Allow-Origin': 'http://127.0.0.1:5500', }); res.end('Hello World');}).listen(3000);同样，也可以设置Access-Control-Allow-methods来设置相应的请求方法，post,get等等 proxy代理前端应用将原本需要跨域访问的请求发送给自身的后端服务器后端服务器再将请求转发至实际的目标服务器，并从目标服务器获取数据最后将数据返回给前端应用。这样通过后端服务器作为「中间层代理」转发请求，可以绕过浏览器同源策略的限制，实现跨域数据的获取。 实现过程创建一个XMLHttpRequest对象并发送一个GET请求到后端（http://192.168.1.63:3000）。onreadystatechange事件处理器会在请求状态改变时触发，并在请求完成且响应状态码为200 OK时打印出响应文本。 script const xhr = new XMLHttpRequest(); xhr.open('GET', 'http://192.168.1.63:3000'); xhr.send(); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } } /script后端创建一个简单的HTTP服务器，监听3000端口，设置响应头Access-Control-Allow-Origin为*，允许任何来源都可以访问此资源，解决跨域问题。再创建一个新的HTTP请求到目标服务器192.168.1.63:3000，与前端设置的要一致，并将从目标服务器收到的数据转发回原始请求者。const http = require('http'); http.createServer(function(req, res) { // 设置响应头允许任何来源访问此资源 res.writeHead(200, { "access-control-allow-origin": "*" }); // 创建一个新的请求到目标服务器 const options = { host: '192.168.1.63', port: '3000', path: '/', method: 'GET', headers: {} }; // 发起代理请求 http.request(options, proxyRes = { // 当从目标服务器接收到数据时，转发给原始请求者 proxyRes.on('data', function(data) { res.end(data.toString()) }); }).end(); // 结束代理请求 }).listen(3000); // 监听3000端口请注意，这样的代理服务器仅适用于开发环境，在生产环境中应当谨慎使用，因为它可能带来安全风险，如中间人攻击等 nginx实现同源相当于node代理，大致原理如下： Websocket实现同源websocket是http协议的一部分，所以它有同源策略websocket是长连接，可以发送和接收消息websocket是html5新增的协议，它是一种双向通信协议，建立在tcp之上实现过程「前端」 创建一个新的WebSocket实例，并传入url参数。设置onopen事件处理器，当 WebSocket 连接成功打开时，将params对象转换为 JSON 字符串并通过 WebSocket 发送。设置onmessage事件处理器，当从 WebSocket 接收到消息时，解析接收到的数据，并调用resolve方法，将解析后的数据作为Promise的结果返回。调用myWebSocket函数，传入 WebSocket 服务器的 URL 和一个包含对象并使用.then方法处理Promise的解决情况 script function myWebSocket(url, params = {}) { return new Promise(function(resolve, reject) { //创建一个新的`WebSocket`实例 const socket = new WebSocket(url) //将`params`对象转换为 JSON 字符串并通过 WebSocket 发送。 socket.onopen = () = { socket.send(JSON.stringify(params)) } //解析接收到的数据，并作为`Promise`的结果返回 socket.onmessage = function(e) { resolve(e.data); } }) } myWebSocket('ws://localhost:3000', {age: 18}).then(res = { console.log(res); }) /script「后端」 npm init -y 初始化为后端项目npm ws 安装ws使用 ws 库来创建一个 WebSocket 服务器，并监听3000端口。监听'connection'事件，每当有一个新的客户端连接到 WebSocket 服务器时，就会触发此事件处理器。为每个连接注册一个'message'事件处理器，当从客户端接收到消息时触发。并设置一个定时器，每两秒调用一次const WebSocket = require('ws'); // 创建一个 WebSocket 服务器实例，并监听3000端口const ws = new WebSocket.Server({ port: 3000 });// 监听 'connection' 事件，每当有新的客户端连接到服务器时触发ws.on('connection', function(obj) { // 监听 'message' 事件，每当从客户端接收到消息时触发 obj.on('message', function(data) { // 向客户端发送一条欢迎消息 obj.send('欢迎访问'); // 设置一个定时器，每隔2秒向客户端发送一条消息 setInterval(() = { obj.send(); }, 2000); });});postMessage当页面一通过iframe嵌套了页面二，这两个页面因为跨域无法进行通讯，可以使用postMessage实现跨域通讯 ?postMessage 是一种在不同窗口、文档或框架之间安全地进行消息传递的方式，它支持跨源消息传递 ?下面带友友们实操一下吧。 「主页 (index.html)」 ： 初始化obj对象，包含姓名和年龄信息。当iframe加载完成后，通过postMessage发送obj对象给detail.html。index.html的onmessage事件处理器接收到detail.html发送的回复消息。body 首页/h2 iframe id="frame" src="http://127.0.0.1:5500/postMessage/detail.html" width="800" height="500" frameborder="0"/iframe script // 定义一个对象，包含要传递的数据 let obj = {name: 'midsummer', age: 18}; // 当 iframe 加载完成后执行以下代码 document.getElementById('frame').onload = function() { // 向 iframe 中的页面发送一个消息 this.contentWindow.postMessage(obj, 'http://127.0.0.1:8080'); // 设置全局的 onmessage 事件处理器，用于接收来自其他窗口的消息 window.onmessage = function(e) { console.log(e.data); // 打印接收到的消息数据 }; }; /script/body「详情页 (detail.html)」 ： 接收到来自index.html的消息。解析消息数据，并更新页面上的显示内容。向index.html发送回复消息。body 详情页 -- span id="title"/span/h3 script // 获取页面中的 span 元素，用于显示信息 let title = document.getElementById('title'); // 设置全局的 onmessage 事件处理器，用于接收来自其他窗口的消息 window.onmessage = function (e) { // 解构赋值，提取消息中的 data 属性，以及消息来源的 origin 属性 let { data: {name, age}, origin } = e; // 更新 span 元素的文本内容，显示发送过来的名字和年龄信息 title.innerText = `${name} ${age}`; // 向消息来源（即发送消息的窗口）发送新的消息 e.source.postMessage(`midsummer现在${++age}岁`, origin); }; /script/body简单来说就是通过设置 postMessage 的第二个参数为目标源地址，可以限制消息只能发送给指定源的窗口。当一个窗口接收到消息时，它可以通过 onmessage 事件处理器来处理消息，并且可以使用 e.source 来回发消息给发送方。 document.domain当两个页面通过iframe进行嵌套，且两个页面的二级域名一致，可以使用document.domain实现同源 ，不知道二级域名的友友们可以参考下图 「主页：」 body 首页/h2 iframe id="frame" src="http://127.0.0.1:5500/postMessage/detail.html" width="800" height="500" frameborder="0"/iframe script // 设置当前页面的 document.domain 为 '127.0.0.1' document.domain = '127.0.0.1'; // 当 iframe 加载完成时执行的函数 document.getElementById('frame').onload = function() { // 输出 contentWindow 中的 data 变量 console.log(this.contentWindow.data); }; /script/body「详情页：」 scriptdocument.domain = '127.0.0.1'var data = 'domain'/script通过设置document.domain放宽限制，允许在同一个顶级域名下的不同子域名之间进行通信。在index.html和detail.html中都设置了document.domain为'127.0.0.1'，确保index.html和detail.html之间的document.domain是相同的，从而绕过了同源策略的限制。` 点击关注公众号，“技术干货”及时达！