资讯专栏INFORMATION COLUMN

跨域请求

rozbo / 2166人阅读

摘要:只要协议域名端口有任何一个不同,都被当作是不同的域,之间的请求就是跨域操作。

什么是跨域请求?

当浏览器执行一个脚本时会检查是否同源,只有同源的脚本才会执行,如果不同源即为跨域

什么是同源?

同源即:由Netscape提出的著名安全策略,是浏览器最核心、基本的安全功能,它限制了一个源(origin)中加载文本或者脚本与来自其他源(origin)中资源的交互方式
,所谓的同源就是指协议、域名、端口相同。

只要协议、域名、端口有任何一个不同,都被当作是不同的域,之间的请求就是跨域操作。

协议?域名?端口?

协议:网络协议遍及OSI通信模型(OSI七层模型,常用协议有TCP/IP、HTTP、FTP协议等)
域名:Domain Name,网域,是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)
端口:是设备与外界通讯交流的出口,分为物理端口和虚拟端口(常见的如80端口)

了解概念后我们知道跨域请求就是web浏览器自身不允许在域名、协议、端口等都不相同的情况下进行页面请求方为,因此作为前端developer在项目开发时是需要解决此类问题的!

为什么要有这种限制?非同源请求页面会怎么样?

设想这样一个情景:A网站是一家银行,用户登录以后,又去浏览其他的网站B,如果网站B可以读取A网站的Cookie,会发生什么问题?
显然,如果Cookie包含隐私(比如存款总额),这些信息就会泄露,更可怕的是,Cookie往往用来保存用户的登录状态,如果用户没有退出登录,其他网站就可以冒用户,为所欲为。因为浏览器同时还规定,提交表单不受同源策略的限制。

非同源限制范围

Cookie、LocalStorage和IndexDB无法获取

DOM无法获得

AJAX请求不能发送


跨域请求解决方案

1. jsonp:(JSON with Padding是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题)
原理:网页客户端动态添加 ...

4.window.name:window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。






正在接触后续补充...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54539.html

相关文章

  • ajax跨域,这应该是最全的解决方案了

    摘要:关于,强烈推荐阅读跨域资源共享详解阮一峰另外,这里也整理了一个实现原理图简化版如何判断是否是简单请求浏览器将请求分成两类简单请求和非简单请求。 前言 从刚接触前端开发起,跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了,16年时也整理过一篇相关文章,但是感觉还是差了点什么,于是现在重新梳理了一下。 个人见识有限,如有差错,请多多见谅,欢迎提出iss...

    ytwman 评论0 收藏0
  • 再也不学AJAX了!(三)跨域获取资源 ② - JSONP & CORS

    摘要:浏览器的同源策略固然保障了互联网世界的数据隐私与数据安全,但是如果当我们需要使用跨域请求资源时,同源策略又会成为开发者的阻碍。我们之前提到过,如果想要绕过浏览器同源策略,实现使用技术跨域获取资源,需要服务端和客户端的协同合作。 浏览器的同源策略固然保障了互联网世界的数据隐私与数据安全,但是如果当我们需要使用AJAX跨域请求资源时,同源策略又会成为开发者的阻碍。在本文中,我们会简单介绍需...

    enda 评论0 收藏0
  • AJAX 跨域解析

    摘要:这里只讲解了两种常见的跨域方式,因为存在一些弊端,因此推荐使用等方式来解决跨域问题。 一、什么是 AJAX 跨域问题 同源策略规定,AJAX 请求(XMLHttpRequest)只能发给同源的网址,否则就会出错。所谓的同源策略是指 3 个相同:协议相同、域名相同、端口相同。 比如 http://www.example.com/index.html 这个网址,协议是http ,域名是 w...

    tinylcy 评论0 收藏0
  • 跨域问题的一次深入研究

    摘要:前言最近在业务代码中深受跨域问题困扰,因此特别写一篇博客来记录一下自己对跨域的理解以及使用到的参考资料。内嵌式跨域通常也是允许的。而我使用时因为这个响应报文最后被认为是跨域问题,无法从中获得的状态码。它代表服务器支持跨域时携带认证信息。 前言 最近在业务代码中深受跨域问题困扰,因此特别写一篇博客来记录一下自己对跨域的理解以及使用到的参考资料。本文的项目背景基于vue+vuex+axio...

    X_AirDu 评论0 收藏0
  • 你不知道的CORS跨域资源共享

    摘要:同源策略禁止使用对象向不同源的服务器地址发起请求。借助于决解同源策略决解同源策略,新方案跨域资源共享这里讲的重点跨域资源共享提供的标准跨域解决方案,是一个由浏览器共同遵循的一套控制策略,通过的来进行交互主要通过后端来设置配置项。 了解下同源策略 源(origin)*:就是协议、域名和端口号; 同源: 就是源相同,即协议、域名和端口完全相同; 同源策略:同源策略是浏览器的一个安全...

    Gu_Yan 评论0 收藏0
  • 你不知道的CORS跨域资源共享

    摘要:同源策略禁止使用对象向不同源的服务器地址发起请求。借助于决解同源策略决解同源策略,新方案跨域资源共享这里讲的重点跨域资源共享提供的标准跨域解决方案,是一个由浏览器共同遵循的一套控制策略,通过的来进行交互主要通过后端来设置配置项。 了解下同源策略 源(origin)*:就是协议、域名和端口号; 同源: 就是源相同,即协议、域名和端口完全相同; 同源策略:同源策略是浏览器的一个安全...

    1fe1se 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<