JavaScript解决跨域的三种方法小结
作者:好好吃饭e
前言
什么是跨域问题
在Web应用中,当一个网页的脚本试图去请求另一个域名下的资源时,就会遇到跨域问题。跨域问题是由浏览器的同源策略所引起的。换句话说:后端返回给浏览器的数据会被浏览器的同源策略给拦截下来。
同源策略要求资源的协议、域名和端口号都必须相同,才能确保数据的安全性。如果不满足这个条件,请求将被浏览器拒绝,从而导致跨域问题的出现。
- 同源策略: 协议号-域名-端口号 都相同的地址,浏览器才认为是同源
协议号:域名:端口号 / 路径 https://192.168.31.45:8080/user https://192.168.31.45:8080/list
上面这个例子虽然它们的路径不一样但是协议号、域名、端口号都相同,所以它们就是同源的
跨域问题的原因
跨域问题主要是由于浏览器的安全策略限制引起的。同源策略的目的是保护用户的隐私和数据安全,防止恶意网站获取用户的敏感信息或进行未授权的操作。 通过限制跨域请求,浏览器有效地减少了许多网络攻击的风险,例如跨站脚本攻击(XSS)和跨站请求伪造(CSRF)。
JSONP
JSONP(JSON with Padding)是一种用于解决跨域请求的技术,它利用了 <script>
标签可以跨域加载资源的特性。
下面是 JSONP 解决跨域请求的基本原理:
- 前端发起 JSONP 请求: 前端页面通过动态创建
<script>
标签,设置其src
属性为包含回调函数的 URL。通常这个 URL 是指向另一个域名下的服务器接口。 - 服务端返回数据: 服务端接收到 JSONP 请求后,会将数据包装在回调函数中返回给前端。这样前端页面就可以获得跨域请求返回的数据。
- 前端处理数据: 前端页面定义好与回调函数同名的 JavaScript 函数,当服务端返回数据时,会执行这个函数并传入返回的数据作为参数,从而实现跨域数据的获取和处理。
前端代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="btn">获取数据</button> <script> // 定义一个函数 jsonp,用于发送 JSONP 请求 function jsonp(url, cb) { return new Promise((resolve, reject) => { // 创建一个 script 标签 const script = document.createElement('script'); // 设置 script 的 src 属性,包含了请求的 URL 和回调函数名称 script.src = `${url}?cb=${cb}`; // http://localhost:3000?cb='callback' // 将 script 添加到文档中 document.body.appendChild(script); // 浏览器自动请求 src 中的内容 // 定义一个全局函数,用于处理返回的数据 window[cb] = (data) => { resolve(data) } }) } // 获取按钮元素 let btn = document.getElementById('btn'); // 绑定点击事件 btn.addEventListener('click', () => { // 发送 JSONP 请求 jsonp('http://localhost:3000', 'callback') .then(res => { console.log('后端的返回结果:' + res); }) }) </script> </body> </html>
后端代码:
const Koa = require('koa'); const app = new Koa(); // 定义中间件函数 main,处理请求并返回数据 const main = (ctx, next) => { console.log(ctx.query); // 输出请求参数对象 { cb: 'callback' } // 从请求参数中获取回调函数名称 const cb = ctx.query.cb; // 准备要返回给前端的数据 const data = '给前端的数据'; // 构造带有回调函数名称的字符串,格式为 'callback("给前端的数据")' const str = `${cb}('${data}')`; // 将构造好的字符串作为响应体返回给前端 ctx.body = str; } // 将 main 中间件注册到 Koa 应用中 app.use(main); // 监听 3000 端口,启动服务器 app.listen(3000, () => { console.log('listening on port 3000'); })
优点:
- 简单易用: JSONP 实现简单,只需在前端添加一个
<script>
标签即可完成跨域请求,无需复杂的配置。 - 兼容性好: JSONP 能够兼容各种浏览器,包括早期版本的浏览器,因为它是通过动态创建
<script>
标签实现的。 - 支持跨域请求: JSONP 可以在不同域之间进行数据通信,解决了传统 AJAX 请求受同源策略限制的问题。
缺点:
- 安全性问题: JSONP 存在安全风险,因为它是通过在前端动态加载脚本来获取数据,可能会被用于注入恶意脚本,导致安全漏洞。
- 只支持 GET 请求: JSONP 只能发起 GET 请求,无法支持其他类型的 HTTP 请求,如 POST、PUT 等。
- 依赖服务端支持: JSONP 需要服务端返回数据时将其包裹在一个回调函数中,因此需要服务端提供支持,如果服务端不支持 JSONP 格式返回数据,则无法使用该方法。
CORS(跨域资源共享)
CORS是一种机制,允许服务器在响应中携带一个特殊的标头,以告知浏览器该服务器允许哪些源的网页访问其资源。 可以总结为一句话:后端通过设置响应头来告诉浏览器不要拒绝接受后端的响应。
前端代码:在用户点击按钮时,通过发送跨域请求获取服务器返回的数据,并将数据打印到浏览器的控制台
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="btn">获取数据</button> <script> let btn = document.getElementById('btn'); btn.addEventListener('click', () => { fetch('http://localhost:3000') // 发送跨域请求到服务器 .then(res => res.json()) .then((res) => { console.log(res); // 打印返回的数据到控制台 }) }) </script> </body> </html>
代码实现了以下功能:
- 在 HTML 中定义了一个按钮元素,id 为 "btn",用于触发发送数据请求。
- 在 JavaScript 部分,使用
fetch
函数发送 GET 请求到指定的服务器地址 "http://localhost:3000"。 - 在成功接收到服务器响应后,使用
.then
方法将响应解析为 JSON 格式。 - 在第二个
.then
方法中,处理解析后的数据,并将其输出到浏览器的控制台。
后端代码 :Node.js 服务器代码,创建了一个 HTTP 服务器,监听在端口 3000。当接收到请求时,返回一个包含 "hello cors" 消息的 JSON 数据。
const http = require('http'); const server = http.createServer((req, res) => { res.writeHead(200, { // cros实现原理 'Access-Control-Allow-Origin': 'http://127.0.0.1:5500' // 允许来自指定地址的跨域请求 }) let data = { msg: "hello cors" } res.end(JSON.stringify(data)) // 返回数据给前端页面 }) server.listen(3000, () => { console.log('listening on port 3000'); })
后端代码第6行在服务端设置响应头来控制跨域访问。
常见的响应头包括:
Access-Control-Allow-Origin
:指定允许访问的域名。例如,
Access-Control-Allow-Origin: *
表示允许所有域名访问,而
Access-Control-Allow-Origin:'http://127.0.0.1:5500'
表示只允许特定域名访问。Access-Control-Allow-Methods
:指定允许的HTTP方法。Access-Control-Allow-Headers
:指定允许的自定义请求头。
CORS支持各种类型的HTTP请求,包括GET、POST等。
domain
我们还可以使用 Domain 方法来解决一些特定情况下的跨域访问问题。 在跨域通信时,还需要注意以下几点:
页面的域名必须满足 Domain 方法的限制,即二级域名相同(如 example.com)。
父级页面需要在设置 document.domain 之前定义需要共享的变量或对象。
子级页面可以通过 window.parent 来访问父级页面的属性或变量,但需要确保父级页面已经加载完成并且两者的域名设置已生效。
下面举一个简单的例子来说明 Domain 方法的用法:
假设有两个页面分别位于不同子域名下,一个是 parent.example.com,另一个是 child.example.com。我们希望这两个页面能够进行跨域通信。
在父级页面 parent.example.com/index.html 中的代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Parent Page</title> </head> <body> <h1>Parent Page</h1> <iframe src="http://child.example.com/child.html"></iframe> <script> document.domain = 'example.com'; var messageFromParent = 'Hello from parent page!'; </script> </body> </html>
在子级页面 child.example.com/child.html 中的代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Child Page</title> </head> <body> <h1>Child Page</h1> <script> document.domain = 'example.com'; var messageFromChild = 'Hello from child page!'; // 访问父级页面定义的变量 var message = window.parent.messageFromParent; console.log('Message from parent: ' + message); </script> </body> </html>
在这个例子中,父级页面和子级页面分别设置了相同的 document.domain 为 'example.com',以实现二级域名相同。
父级页面定义了一个名为 messageFromParent
的变量,子级页面在加载后通过 window.parent 来访问父级页面定义的变量,并打印出父级页面的消息。
通过设置相同的 document.domain,父子页面之间就可以进行跨域通信,实现数据共享和交互。
postMessage
使用 postMessage()
方法结合 <iframe>
元素可以实现跨域通信,这是一种常见的技术。通过在父窗口和嵌套的 <iframe>
之间使用 postMessage()
方法,可以安全地在不同源之间进行通信。
<iframe>
可以用于解决跨域通信的问题,其原理是利用浏览器中同源策略的限制,将不同域的内容加载到独立的 <iframe>
中,通过 postMessage 方法进行跨文档通信。
在 a.html 文件中:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h2>a.html</h2> <!-- 创建一个 iframe 元素来加载 b.html --> <iframe src="http://127.0.0.1:5500/postMessage/b.html" frameborder="0" id="iframe"></iframe> <script> // 向 b.html 发送数据 let iframe = document.getElementById('iframe'); iframe.onload = function() { // 准备要发送的数据 let data = { name: 'Tom' }; // 通过 postMessage 方法向 iframe 发送数据 iframe.contentWindow.postMessage(JSON.stringify(data), 'http://127.0.0.1:5500'); } // 监听来自 b.html 的消息 window.addEventListener('message', function(e) { console.log(e.data); }); </script> </body> </html>
在 b.html 文件中:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h4>b.html</h4> <script> // 监听来自父页面的消息 window.addEventListener('message', function(e) { console.log(JSON.parse(e.data)); if (e.data) { // 收到消息后延迟 2 秒发送回应给父页面 setTimeout(function() { window.parent.postMessage('我接受到', 'http://127.0.0.1:5500'); }, 2000); } }); </script> </body> </html>
优点:
- 安全性: 使用
<iframe>
结合 postMessage 进行跨域通信是一种相对安全的方法,能够避免常见的跨站脚本攻击(XSS)。 - 灵活性: 可以在不同域之间传递数据,实现更丰富的交互体验,如单点登录、共享数据等。
- 适用性广泛: 跨域通信是 Web 开发中常见需求,而
<iframe>
结合 postMessage 是一种通用且有效的解决方案。
缺点:
- 复杂性: 跨域通信涉及到多个文档之间的交互,需要额外的处理和编码,增加了开发的复杂度。
- 性能开销: 使用
<iframe>
进行跨域通信可能会引入额外的网络请求和资源加载,对页面加载性能有一定影响。 - 兼容性: 旧版本的浏览器可能对 postMessage 支持不完整,需要做兼容性处理。
以上就是JavaScript解决跨域的三种方法的详细内容,更多关于JavaScript解决跨域的资料请关注脚本之家其它相关文章!