程序员之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript解决跨域

JavaScript解决跨域的三种方法小结

 更新时间：2024年03月14日 09:03:13   作者：好好吃饭e  
在Web应用中,当一个网页的脚本试图去请求另一个域名下的资源时,就会遇到跨域问题,跨域问题是由浏览器的同源策略所引起的,本文给大家介绍了JavaScript解决跨域的三种方法,需要的朋友可以参考下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

前言

什么是跨域问题

在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://9i0i.com/pic.php?p=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://9i0i.com/pic.php?p=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解决跨域的资料请关注程序员之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • JavaScript模拟文件拖选框样式v1.0的实例

    JavaScript模拟文件拖选框样式v1.0的实例

    下面小编就为大家带来一篇JavaScript模拟文件拖选框样式v1.0的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • javascript实现完美拖拽效果

    javascript实现完美拖拽效果

    javascript实现的拖拽效果，可以把屏幕上的图片拖动到任意地方，效果平滑，点击图片还可以从侧边展开图片的详细信息，非常好的相册效果
    2015-05-05
  • 原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作

    原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作

    这篇文章主要介绍了原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作,结合实例形式分析了JS使用forEach()和map()以及jQuery使用$.each、$.map进行遍历操作相关技巧与操作注意事项,需要的朋友可以参考下
    2019-02-02
  • JavaScript中this详解

    JavaScript中this详解

    this是javascript的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。
    2015-09-09
  • yepnope.js 异步加载资源文件

    yepnope.js 异步加载资源文件

    yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本，可以在页面上仅加载用户需要的js/css。
    2011-09-09
  • 用javascript getComputedStyle获取和设置style的原理

    用javascript getComputedStyle获取和设置style的原理

    这两天用了baidu 百度空间中的弹出窗口js，感觉不错，很强大，很好很简单的解决了好几个问题，界面友好度以及美化也好多了，以前都是硬邦邦window.open();
    2008-10-10
  • js opener的使用详解

    js opener的使用详解

    在JS中，window.opener只是对弹出窗口的母窗口的一个引用。本篇文章主要是对js中opener的使用进行了详细介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • 使用JS动态显示文本

    使用JS动态显示文本

    这篇文章主要为大家详细介绍了使用JavaScript动态显示文本，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 微信小程序实现的动态设置导航栏标题功能示例

    微信小程序实现的动态设置导航栏标题功能示例

    这篇文章主要介绍了微信小程序实现的动态设置导航栏标题功能,结合实例形式分析了微信小程序使用wx.setNavigationBarTitle接口动态设置导航栏标题的相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • JavaScript实现选择框按比例拖拉缩放的方法

    JavaScript实现选择框按比例拖拉缩放的方法

    这篇文章主要介绍了JavaScript实现选择框按比例拖拉缩放的方法,具有等比例缩放及设置最小范围等功能,涉及javascript事件的添加、监听、页面元素动态操作及鼠标事件的响应等技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08

最新评论

?


http://www.vxiaotou.com