记录---跨域问题?同源策略大全
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
前言:跨域与同源策略
跨域:通常出现在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 以参数的形式接收后端的响应
前端代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <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 > |
后端代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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
设置响应头来指定允许的域名,以此来通知浏览器此时同源策略不生效
前端代码
1 2 3 4 5 6 7 8 9 10 | <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 > |
后端代码
1 2 3 4 5 6 7 8 9 10 11 12 | 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
事件处理器会在请求状态改变时触发,并在请求完成且响应状态码为200OK
时打印出响应文本。
1 2 3 4 5 6 7 8 9 10 | <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
,与前端设置的要一致,并将从目标服务器收到的数据转发回原始请求者。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | 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
的解决情况
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <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'
事件处理器,当从客户端接收到消息时触发。并设置一个定时器,每两秒调用一次
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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
发送的回复消息。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <body> <h2>首页< /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
发送回复消息。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <body> <h3>详情页 -- <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
实现同源 ,不知道二级域名的友友们可以参考下图
主页:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <body> <h2>首页< /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 > |
详情页:
1 2 3 4 | <script> document.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
是相同的,从而绕过了同源策略的限制。本文转载于:https://juejin.cn/post/7411168461500366860
__EOF__
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek-R1本地部署如何选择适合你的版本?看这里
· 开源的 DeepSeek-R1「GitHub 热点速览」
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 揭秘 Sdcb Chats 如何解析 DeepSeek-R1 思维链
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
2023-12-18 记录--没有await,如何处理“回调地狱”
2021-12-18 Axios的正确食用方法
2020-12-18 JS实现计算器,带三角函数,根号