您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

前端:何为跨域,如何跨域

时间:2020-02-05 15:12:35  来源:  作者:

前端:何为跨域,如何跨域

同源策略浏览器设计的一个功能限制CORS突破同源策略的一个方法JSONPIE时代的补救办法

同源策略

(一)同源的定义

  • 源:源 = 协议+域名+端口
  • 获取源的方法:window.origin
  • 如果两个url的 协议名、域名、端口号 完全一致,则称他们同源。

举例:https://qq.com 和 https://www.baidu.com 不同源https://baidu.com 和 https://www.baidu.com 也不同源(二)同源策略定义

  1. 浏览器规定
    如果JS运行在源A中,那么就只能获得源A中的数据,不能获得源B中的数据,即不允许“跨域”
  2. 举例:假设 https://oliver.com/index.html 引用了https://cdn.com/jQuery.js那么就说jQuery.js是运行在源 https://oliver.com 里所以jQuery.js只能获得 https://oliver.com 中的数据,而不能获取源 https://cdn.com 中的数据

 

(三)关键问题

  • 浏览器无法区分请求的发送者

(四)同源策略的目的

  • 为了保护用户隐私,防止用户个人数据被钓鱼网站偷走。

跨域的实现

解决方案一:CORS

  1. 问题根源
    浏览器默认不同源之间不能相互访问数据
    但假设有两个不同源的网站都属于我,我就是想要他们相互访问,那么我可以用CORS方法。
  2. 使用方法:提前声明。
    在源A中增加响应头Access-Control-Allow-Origin: http://xxx.xxx 
    这样就可以允许源 http://xxx.xxx 访问源A的数据了
  3. 详细用法:去MDN瞅瞅

解决方案二:JSONP

  1. 问题根源
    IE不支持CORS啊!!!
  2. 定义
    利用script标签没有跨域限制来使用js包裹数据,达成和第三方数据通信的一种跨域解决方案。
  3. 步骤假设oliver.com想要访问db.com里的数据 db.com中的数据写到/data.js里 oliver.com用<script>引用db.com/data.js /data.js执行,执行什么呢? oliver.com提前定义好window.fn函数 /data.js执行window.fn({data:[...]}) 然后源oliver.com就通过window.fn获取到了数据 window.fn就是一个回调啊!
  4. JSONP的优缺点
  • 优点: 解决IE的兼容; 可以跨域;
  • 缺点: 读取不到状态码等详细响应信息 只能发get请求,不支持post

总结:

  1. 跨域实现了跨页面的数据通信,是前端非常重要的一门技术点。
  2. 我的github中写好了JSONP和CORS的demo 点击查看

原文 https://segmentfault.com/a/1190000021686919



Tags:跨域   点击:()  评论:()
声明:本站部分内容来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除,谢谢。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
前言:Axios是一个来自于vue官方推荐的一个用于与后端(Java、go、Python、PHP)进行数据交互的JavaScript库,你可以通过axios库快速高效的与后端进行数据交互,是现文件上传等复杂功...【详细内容】
2020-10-09   跨域  点击:(9)  评论:(0)  加入收藏
报错:Access to XMLHttpRequest at &#39;http://localhost:8080/SpringBootServer/testfile&#39; from origin &#39;null&#39; has been blocked by CORS policy: No &#39;Ac...【详细内容】
2020-09-03   跨域  点击:(1)  评论:(0)  加入收藏
声明由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失,均由使用者本人负责,雷神众测以及文章作者不为此承担任何责任。雷神众测拥有对此文章的修改和解释...【详细内容】
2020-08-31   跨域  点击:(4)  评论:(0)  加入收藏
随着MPLS VPN解决方案的广泛应用,服务的终端用户的规格和范围也在增长,在一个企业内部的站点数目越来越大,某个地理位置与另外一个服务提供商相连的需求变得非常的普遍,例如国内...【详细内容】
2020-08-17   跨域  点击:(5)  评论:(0)  加入收藏
跨域问题现在绝大多数公司的项目都是前后端分离的,前后端分离后势必会遇到跨域问题。如下图 继续debug发现,reponse为undefined,提示消息为Network Error。 所以当你和前端...【详细内容】
2020-08-13   跨域  点击:(2)  评论:(0)  加入收藏
跨域的含义同源策略以及其限制内容同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓 同源是指"协议+域名+...【详细内容】
2020-08-10   跨域  点击:(2)  评论:(0)  加入收藏
在很多非生产环境下,经常会存在跨域的场景,而在Chrome80版本后这种跨域就会引起页面自动刷新。错误如下A cookie associated with a cross-site resource at http://10.181....【详细内容】
2020-08-03   跨域  点击:(15)  评论:(0)  加入收藏
作者 | 写代码的明哥来源 | Python编程时光这篇文章本应该是属于 HTTP 里的一部分内容,但是我看内容也挺多的,就单独划分一篇文章来讲下。什么是跨域请求要明白什么叫跨域请求...【详细内容】
2020-08-01   跨域  点击:(9)  评论:(0)  加入收藏
在最近的项目中,遇到这样一个场景:合作方开发H5页面并部署在合作方的服务器上,但页面中嵌入了我方的SDK,SDK会直接调用我方的接口,如下图: 但是控制台中却会收到如下报错:Access to...【详细内容】
2020-07-30   跨域  点击:(1)  评论:(0)  加入收藏
开发出高性能的 Web 应用固然重要,但安全问题也不容小觑。本文我们继续以 HTTP 为线索,展开来讲一讲浏览器安全相关的同源策略。浏览器的同源策略(Same Origin Policy)源(Origin)...【详细内容】
2020-07-19   跨域  点击:(3)  评论:(0)  加入收藏
跨域产生的原因: 浏览器限制。如果浏览器发现请求是跨域的时候,就会做校验,如果校验不通过就会报跨域的错误 跨域。发出去的请求只要域名、端口、协议中的任意一个与当前域不同...【详细内容】
2020-07-02   跨域  点击:(4)  评论:(0)  加入收藏
跨域问题的由来相信很多人都或多或少了解过跨域问题,尤其在现如今前后端分离大行其道的时候。你在本地开发一个前端项目,这个项目是通过 node 运行的,端口是9528,而服务端是通过...【详细内容】
2020-04-28   跨域  点击:(3)  评论:(0)  加入收藏
有一个场景(跨域产生唯一uuid)需要在跨域的情况下读写cookie,中间调试过程遇到了很多问题,最终调通,记录一下:前端代码:(调试工具: http://www.w3school.com.cn/tiy/t.asp?f=jquery_a...【详细内容】
2020-04-26   跨域  点击:(19)  评论:(0)  加入收藏
受制于同源策略,一个域去请求另一个域的资源时,就会出现跨域的现象,而在我们开发中,经常需要跨域去请求资源(例如:本地localhost,去请求测试环境的资源),所以我们也就需要一些方法去...【详细内容】
2020-03-30   跨域  点击:(7)  评论:(0)  加入收藏
那么我们今天就来了解一下cors跨域和jsonp劫持漏洞同源策略为什么还要讲一遍同源策略,我们之前写xss的时候有讲到过,不了解的同学可以看看我们的那篇xss文章,那么该策略是浏览...【详细内容】
2020-02-16   跨域  点击:(55)  评论:(0)  加入收藏
同源策略浏览器设计的一个功能限制CORS突破同源策略的一个方法JSONPIE时代的补救办法同源策略(一)同源的定义: 源:源 = 协议+域名+端口 获取源的方法:window.origin 如果两个url...【详细内容】
2020-02-05   跨域  点击:(10)  评论:(0)  加入收藏
这篇文章我们聊一聊CORS跨域,它的全称是"跨域资源共享"(Cross-origin resource sharing)。在之前的文章中我们已经详细介绍了如何使用JSONP进行接口跨域请求,如果不了解的可以参...【详细内容】
2020-01-16   跨域  点击:(35)  评论:(0)  加入收藏
今天我们聊一下前端中非常基础的一个知识点&mdash;&mdash;iframe跨域。作为一名前端,在业务中你可能会遇到这样一个场景:自己开发的页面中需要通过iframe嵌入别人的页面,比如pa...【详细内容】
2019-12-30   跨域  点击:(78)  评论:(0)  加入收藏
跨域产生的原因根本原因是由于浏览器的同源策略。同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了...【详细内容】
2019-12-27   跨域  点击:(33)  评论:(0)  加入收藏
一、跨域问题的来源浏览器跨域处理原由:浏览器安全防护的“同源政策”影响。关于什么是“同源政策”,可以看这边文章,讲解比较详细易懂https://blog.csdn.net/dreamcatcher1...【详细内容】
2019-12-20   跨域  点击:(33)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条