跨域

简介: 跨域问题在Web开发中较为常见,开发人员需要根据具体的项目需求和场景选择合适的跨域解决方案。在实际应用中,CORS和代理服务器是比较常用的方法,而JSONP和WebSockets则适用于一些特定的业务场景。

跨域是指浏览器从一个域名的网页去请求另一个域名下的资源时,由于浏览器的同源策略,导致请求被限制的一种现象。以下是关于跨域的详细介绍:

同源策略

  • 定义:同源策略是浏览器的一种安全机制,它限制了一个源的文档或脚本如何与另一个源的资源进行交互。同源指的是协议、域名、端口号都相同,如果有任何一项不同,就会产生跨域问题。
  • 目的:主要是为了防止恶意网站通过脚本等方式获取用户在其他网站的敏感信息,保障用户的信息安全和网站的正常运行。

跨域的常见场景

  • 不同域名:例如,一个网站的页面位于http://www.example1.com,而它需要请求http://www.example2.com下的接口数据,这就属于跨域请求。
  • 不同子域名:即使是主域名相同,但子域名不同,如http://sub1.example.comhttp://sub2.example.com之间的请求,也会产生跨域问题。
  • 不同端口:如http://www.example.com:8080http://www.example.com:3000发送请求,由于端口不同,同样会被视为跨域请求。
  • 不同协议http://www.example.comhttps://www.example.com之间的请求也会受到同源策略的限制,产生跨域问题。

跨域解决方案

  • JSONP
    • 原理:利用<script>标签不受同源策略限制的特点,通过动态创建<script>标签,将跨域请求的URL作为src属性的值,并在URL中添加一个回调函数名作为参数。服务器收到请求后,会将数据包装在这个回调函数中返回,浏览器在接收到响应后会自动执行回调函数,从而实现数据的获取。
    • 示例
      <script>
      function handleData(data) {
              
      console.log(data);
      }
      var script = document.createElement('script');
      script.src = 'http://www.example2.com/api/data?callback=handleData';
      document.getElementsByTagName('head')[0].appendChild(script);
      </script>
      
    • 局限性:只能用于GET请求,并且需要服务器端的支持,对服务器的改动较大。
  • CORS
    • 原理:跨域资源共享(CORS)是一种基于HTTP头的机制,它允许服务器明确指定哪些源可以访问其资源。服务器通过在响应头中设置Access-Control-Allow-Origin等字段来控制跨域访问。
    • 示例:服务器端设置响应头:
      app.use((req, res, next) => {
             
      res.setHeader('Access-Control-Allow-Origin', '*');
      res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
      res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
      next();
      });
      
    • 优势:支持多种HTTP请求方法,是目前比较常用的跨域解决方案,对客户端的改动较小,安全性相对较高。
  • 代理服务器
    • 原理:在客户端和目标服务器之间设置一个代理服务器,客户端先将请求发送到代理服务器,代理服务器再将请求转发到目标服务器,并将目标服务器的响应返回给客户端。由于客户端和代理服务器属于同源,因此避免了跨域问题。
    • 示例:在开发环境中,可以使用Webpack的devServer.proxy配置来设置代理服务器:
      module.exports = {
             
      //...其他配置
      devServer: {
             
      proxy: {
             
      '/api': {
             
        target: 'http://www.example2.com',
        changeOrigin: true,
        pathRewrite: {
             
          '^/api': ''
        }
      }
      }
      }
      };
      
    • 适用场景:适用于开发环境和一些对安全性要求较高的场景,但需要额外配置和维护代理服务器。
  • WebSockets
    • 原理:WebSockets是一种全双工通信协议,它在客户端和服务器之间建立了一个持久的连接,通过该连接可以进行双向数据传输。由于WebSockets的连接不受同源策略的限制,因此可以用于跨域通信。
    • 示例:客户端代码:
      const socket = new WebSocket('ws://www.example2.com/ws');
      socket.addEventListener('open', function (event) {
             
      socket.send('Hello Server!');
      });
      socket.addEventListener('message', function (event) {
             
      console.log('Received:', event.data);
      });
      
    • 特点:适用于实时性要求较高的应用场景,如在线聊天、实时数据更新等,但需要服务器端支持WebSockets协议。

跨域问题在Web开发中较为常见,开发人员需要根据具体的项目需求和场景选择合适的跨域解决方案。在实际应用中,CORS和代理服务器是比较常用的方法,而JSONP和WebSockets则适用于一些特定的业务场景。

相关文章
|
Web App开发 数据采集 前端开发
基于Python的Selenium详解:从入门到实践
基于Python的Selenium详解:从入门到实践
709 0
|
iOS开发 芯片 MacOS
macOS M1芯片版本必备Oh My Zsh、Homebrew安装教程
Oh My Zsh和Homebrew安装教程。用于Terminal优化及macOS包管理工具。
2561 0
|
2月前
|
设计模式 Linux 开发工具
Docker部署会吗?
本段内容主要介绍了Docker常用命令、Linux基础指令及日志查看方法,还涉及SpringMVC的执行流程、设计模式与注解,适合用于面试中技术能力的展示。
91 0
|
4月前
|
Web App开发 监控 安全
OSS客户端签名直传实践:Web端安全上传TB级文件方案(含STS临时授权)
本文深入解析了客户端直传技术,涵盖架构设计、安全机制、性能优化等方面。通过STS临时凭证与分片上传实现高效安全的文件传输,显著降低服务端负载与上传耗时,提升系统稳定性与用户体验。
444 2
|
12月前
|
安全 前端开发 JavaScript
什么是跨域?为什么会产生跨域?怎么解决跨域?
什么是跨域?为什么会产生跨域?怎么解决跨域?
1737 0
|
监控 安全 物联网
阿里云mqtt简介和使用流程
本文介绍了阿里云MQTT的准备工作、简介和使用流程。首先,用户需要注册阿里云账号并完成实名认证。接着,通过阿里云物联网平台创建产品和设备,获取连接所需的Broker Address、Port、Username和Password。然后,使用MQTT客户端(如MQTTX)配置这些信息进行连接,并激活设备。最后,创建并订阅/发布自定义Topic,实现设备间的通信。阿里云MQTT是一个适用于物联网设备的轻量级通信协议,提供高并发、高可靠性的服务,广泛应用于各种物联网场景。
阿里云mqtt简介和使用流程
|
12月前
|
编解码 算法 测试技术
在不影响动画质量的前提下对 Lottie 动画文件进行压缩
【10月更文挑战第16天】在不影响动画质量的前提下对 Lottie 动画文件进行压缩需要综合运用多种方法和策略。通过细致的分析、合理的调整和适当的技术手段,可以在保持动画视觉效果的同时,有效地减小文件的大小,提升动画的性能和用户体验。
674 57
|
存储 缓存 数据库连接
Entity Framework Core 跨数据库查询超厉害!多数据库连接最佳实践,让你的开发更高效!
【8月更文挑战第31天】在现代软件开发中,跨数据库查询是常见需求。Entity Framework Core(EF Core)作为强大的ORM框架,支持多种方法实现这一功能。本文介绍了在EF Core中进行跨数据库查询的最佳实践,包括:理解数据库上下文、使用多个上下文进行查询、处理数据库连接与事务,以及性能优化策略。通过创建独立的数据库上下文如`UserContext`和`OrderContext`,并在业务逻辑中同时使用它们,可以轻松实现跨库查询。此外,利用`TransactionScope`可确保事务一致性,从而提高系统的可靠性和效率。
968 0
Windows中如何查看被占用的端口、杀掉对应的进程
这篇文章介绍了在Windows系统中如何查看被占用的端口号以及如何杀掉占用端口的进程,包括使用命令提示符的`netstat -ano | findstr 端口号`命令查找进程PID,然后通过任务管理器或`taskkill /PID PID号`命令来结束进程。
Windows中如何查看被占用的端口、杀掉对应的进程
|
JavaScript PHP UED
【PHP开发专栏】PHP与WebSocket实时通信
【4月更文挑战第30天】本文介绍了PHP实现WebSocket实时通信的原理、使用方法和实际案例。WebSocket是基于HTTP的全双工通信协议,PHP 5.4以上版本支持WebSocket,可通过内置函数或第三方库如Socket.io、PHP-WebSocket来实现。文章详细展示了创建WebSocket服务器和客户端的PHP代码示例,并提及在PHP中使用Socket.io库进行实时通信。
673 2