什么是跨域?如何解决?

简介: 了解什么是跨域?什么是同源策略,及怎么解决跨域

跨域

在了解跨域之前,我们先了解下一个域名地址的组成,就拿腾讯云+社区的 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>标签

解决跨域

  1. JSONP
    上面我们说道有三个标签是可以跨域访问资源,JSONP 利用<script>元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 数据。JSONP 请求一定需要对方的服务器做支持才可以。
<script type='text/javascript'>
    window.jsonpCallback = function (res) {
        console.log(res)
    }
</script>
<script src='http://localhost:8080/api/jsonp?id=1&cb=jsonpCallback' type='text/javascript'></script>
  1. CORS
    整个 CORS 通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS 通信与同源的 AJAX 通信没有差别,代码完全一样。浏览器一旦发现 AJAX 请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口,就可以跨源通信。
    只需要在服务器端做一些小小的改造即可:
"Access-Control-Allow-Headers":"*"
  1. nginx 反向代理
    这个我们之前公司项目使用的是这种方式,具体配置我也不太了解。


相关文章
|
4月前
|
JSON 前端开发 JavaScript
前端如何实现跨域
前端如何实现跨域
|
5月前
|
运维 前端开发 JavaScript
关于跨域,和跨域问题的完整解决方案
关于跨域,和跨域问题的完整解决方案
46 0
|
5月前
|
JSON 前端开发 安全
前端解决跨域的六种方法
跨域问题是指当一个网页试图访问来自不同源(域名、协议、端口)的资源时,浏览器会出于安全考虑而限制这种访问。这是因为浏览器的同源策略防止了恶意网站获取其他网站的敏感信息。
|
5月前
|
JSON JavaScript 前端开发
跨域的原理及解决方案
同源策略是Web应用程序安全性模型中的重要概念。根据该策略,Web浏览器允许第一个网页中包含的脚本访问第二个网页中的数据,但前提是两个网页具有相同的来源。来源由URI,主机名和端口号的组合定义。此策略可防止一个页面上的恶意脚本通过该页面的DOM(Document Object Model)获得对另一网页上敏感数据的访问。 JSONP 由于同源策略,一般来说位于server1.example.com...
|
前端开发 Java 应用服务中间件
项目里面怎么解决跨域的?
项目里解决跨域的方法
|
JSON 缓存 安全
跨域时怎么处理 cookie?
跨域时怎么处理 cookie?
|
存储 前端开发 JavaScript
什么是跨域?如何解决跨域问题?
什么是跨域?如何解决跨域问题?
761 0
什么是跨域?如何解决跨域问题?
|
安全 JavaScript 前端开发
什么是跨域,如何解决跨域?
还在等什么,快来一起讨论关注吧,公众号【八点半技术站】,欢迎加入社群
什么是跨域,如何解决跨域?
|
Web App开发 JavaScript 前端开发
【跨域】一篇文章彻底解决跨域设置cookie问题!
之前做项目的时候发现后端传过来的 SetCookie 不能正常在浏览器中使用。是因为谷歌浏览器新版本Chrome 80将Cookie的SameSite属性默认值由None变为Lax。接下来带大家解决该问题。
3107 0
|
JSON 前端开发 数据格式
【实战晋级】理解跨域以及工作中跨域问题的处理 - 2 预检请求
本文是第2节,紧接上1节 【实战晋级】理解跨域以及工作中跨域问题的处理 - 1。
197 0
【实战晋级】理解跨域以及工作中跨域问题的处理 - 2 预检请求