什么是跨域?如何解决?

简介: 什么是跨域?如何解决?

跨域

在了解跨域之前,我们先了解下一个域名地址的组成,就拿腾讯云+社区的 loader.js 说吧。这个一个 js 资源文件

https://cloud.tencent.com:443/qccomponent/loader.js

复制

我们拆分下,这个地址包含 https(请求协议)、cloud.tencent.com(域名)、443(端口号,https 默认 443,不加也可以)及资源地址(qccomponent/loader.js)。这样一拆分就很好了解什么是跨域了。

跨域就是协议、域名、端口号中任意一个不相同时,都算作不同域。不同域之间请求资源,都算是跨域。

image.png

这里我们说明一下,为什么会出现跨域。出于浏览器的同源策略限制。同源策略会阻止一个域的 javascript 脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port),因此只要其中一个不相同,就是跨域。

说明:同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。

同源策略

同源策略是一个重要的安全策略,它用于限制一个 origin 的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。如果没有同源策略的限制,用户的信息将不再是安全的,因为任何一个人都可以通过资源注入,恶意获取用户信息。

同源策略限制了哪些?

  1. Cookie、LocalStorage、sessionStorag、IndexedDB 等存储性内容
  2. DOM 节点
  3. AJAX 请求

但是有三个标签是可以跨域访问资源的

  1. <img>标签
  2. <link>标签
  3. <script>标签

解决跨域

JSONP 上面我们说道有三个标签是可以跨域访问资源,JSONP 利用<script>元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 数据。JSONP 请求一定需要对方的服务器做支持才可以。

CORS 整个 CORS 通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS 通信与同源的 AJAX 通信没有差别,代码完全一样。浏览器一旦发现 AJAX 请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口,就可以跨源通信。

"Access-Control-Allow-Headers":"*"

复制

nginx 反向代理 这个我们之前公司项目使用的是这种方式,具体配置我也不太了解。

相关文章
|
存储 安全 编译器
|
开发框架 NoSQL .NET
.NET Core MongoDB的简单使用
.NET Core MongoDB的简单使用
371 0
|
Java 应用服务中间件 数据库连接
面试官:SpringBoot如何优雅停机?
面试官:SpringBoot如何优雅停机?
660 0
|
SQL 存储 监控
水滴筹基于阿里云 EMR StarRocks 实战分享
水滴筹大数据部门的数据开发工程师韩园园老师为大家分享水滴筹基于阿里云EMR StarRocks的实战经验。
6740 3
水滴筹基于阿里云 EMR StarRocks 实战分享
|
12月前
|
开发框架 算法 .NET
C#/.NET/.NET Core技术前沿周刊 | 第 15 期(2024年11.25-11.30)
C#/.NET/.NET Core技术前沿周刊 | 第 15 期(2024年11.25-11.30)
204 6
|
开发框架 NoSQL 关系型数据库
基于SqlSugar的开发框架循序渐进介绍(27)-- 基于MongoDB的数据库操作整合
基于SqlSugar的开发框架循序渐进介绍(27)-- 基于MongoDB的数据库操作整合
|
并行计算 算法 量子技术
量子计算与材料科学:加速新材料研发进程
【9月更文挑战第24天】量子计算与材料科学的深度融合,正在开启一个全新的科研时代。通过利用量子计算技术的优势,我们可以更加高效地模拟和预测材料的性能,加速新材料的研发进程。这不仅有助于推动材料科学的进步,还将为工业、能源、环保等领域带来革命性的变革。让我们共同期待量子计算技术在材料科学领域的辉煌未来!
|
自然语言处理 IDE 开发工具
通义灵码使用安装教程,3 分钟快速上手体验
通义灵码,是阿里云与通义实验室联合出品的一款基于通义大模型的智能编码辅助工具,提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码优化、注释生成、代码解释、研发智能问答、异常报错排查等能力,并针对阿里云的云服务使用场景调优,助力开发者高效、流畅的编码。目前个人版免费使用。
2977 10
|
JSON Java API
springboot集成ElasticSearch使用completion实现补全功能
springboot集成ElasticSearch使用completion实现补全功能
225 1
|
数据处理 Swift iOS开发
探索iOS开发的未来之路:SwiftUI和Combine框架的融合
在本文中,我们将深入探讨iOS开发的新趋势——SwiftUI和Combine框架的结合使用。我们将从这两个框架的基本概念入手,逐步解析它们如何协同工作,以实现更加高效、响应式的用户界面构建。通过实例演示,我们将揭示这种组合如何简化代码结构,提高开发效率,并增强应用性能。最后,我们将展望这种技术栈在未来iOS开发中的潜在影响和应用前景。

热门文章

最新文章