4.同源策略与跨域请求

zhihaospace zhihaospace     2023-04-15     431

关键词:

一.同源策略基本概念

1.同源策略概念:

  一种约定,它是浏览器最核心也是最基本的安全功能,同源指域名、协议、端口需要保持一直才能进行相互间的访问。

2.例子:

(1)http://a.com没有办法访问到http://b.com下的脚本文件和文档。

技术图片

(2)浏览器采用同源策略,禁止页面加载或执行与自身那个来源不同的域的任何脚本。换句话说浏览器禁止的是来源不同的“document”或脚本用来对当前“document”读取或设置某些属性。

技术图片

(3)哪些不受同源限制

  • <script>、<img>、<iframe>、<link>这些包含src属性的标签可以加载跨域资源。但浏览器限制了JavaScript的权限使其不能读、写加载的内容。

二.跨域请求的概念

1.概念:

  发起请求的域和指向的资源所在的域不同时,则称为跨域请求,这里的域值协议+域名+端口

三.跨域请求的解决方案

1.解决方案

  • 通过JSONP可以实现跨域请求处理过程

  • 通过CORS来实现跨域请求处理过程

  • 通过nginx代理来实现跨域请求处理过程

2.JSONP实现的跨域请求

(1)使用<script>标签的src属性请求跨域资源

技术图片技术图片

(2)使用jquery的ajax请求跨域资源,必须是get请求,dataType必须为jsonp

技术图片

3.CORS(跨域资源共享)

直接在服务器端配置,客户端就可以自由的请求资源了

技术图片

4.代理实现跨域过程

  • Nginx代理

  • Node的中间件实现代理

Node中间件实现代理:

  • 通过express实现请求转发过程:将localhost:3000/api/foo/bar 通过服务器请求转发到http://www.example.org/api/foo/bar

  • 需要使用npm安装express和http-proxy-middleware

技术图片

 

同源策略与跨域请求(代码片段)

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

同源策略与跨域问题解决

...的源。举个例子:下表给出了相对http://a.bbb.com/dir/page.html同源检测的示例:由同源策略导致的的AJAX请求失败例如:页面路径为:http://127.0.0.1:8848/fileTest/test.html后台接口地址为:http://localhost:8080/sayHello产生的结果:此即为跨域请求... 查看详情

同源策略与跨域问题(代码片段)

...个方面进行跨域详解。1.为什么会有跨域问题?2.什么是同源策略?3.前后端通信方式有哪些?4.解决跨域通信的方式有哪些?5.解决跨域方式详细说明 为什么会有跨域问题?  答:是由于浏览器的同源策略。什么是同源策... 查看详情

浏览器同源策略与跨域出现原因

什么是同源策略?  同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心的也是最基本的安全功能,web也是构建在同源策略基础上,浏览器只是针对同源策略的一种实现。 它是由Netscape提出的一个著名的安全策略,目前... 查看详情

同源策略与跨域访问

1.什么是同源策略    理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。   何谓同源:       URL由协议、域名、端口和路径组成,... 查看详情

同源策略与跨域问题

  一.什么是同源策略?   一个源:如果协议,端口,域名对于两个页面是相同的,则两个页面具有相同的源.   简单来说就是,浏览器允许包含在页面A内的脚本访问第二个页面B的数据资源,这一切是建立在A和B同源的... 查看详情

一文梳理同源策略与跨域技术(代码片段)

1.同源策略同源策略是一个重要的安全策略,它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。1.1何谓同源?如果两个URL的protocol、port(如果有指定... 查看详情

同源与跨域jsonp(函数封装)cors(代码片段)

文章目录同源政策跨域问题JSONPCORS同源政策Ajax请求限制:Ajax只能向自己的服务器发送请求。同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。比如现在有一个A网... 查看详情

浏览器的同源策略与跨域处理(代码片段)

一、 同源策略如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源。下表给出了相对http://store.company.com/dir/page.html同源检测的示例:同源策略限制了从同一个源加载的文档或脚本如何与来自另一... 查看详情

同源与跨域(代码片段)

一、何为跨域?就是跨域名,跨端口,跨协议  例如:如果有两个服务器,服务器A和服务器B,服务器A上存储了php数据,script,甚至是css这些文件,而你在服务器B上只写了html,然后你所在的服务器B上动态创建script,css,php数据(... 查看详情

django之跨域请求同源策略(代码片段)

同源策略:首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。而如果我们要跳过这个策略,也就是说非要跨域请求,那么就需要通过JSONP... 查看详情

django框架之跨域请求伪造(代码片段)

 浏览目录同源策略与Jsonp同源策略JsonpjQuery对JSONP的实现CORS简介两种请求 同源策略与Jsonp同源策略同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功... 查看详情

django框架之跨域请求伪造(代码片段)

 浏览目录同源策略与Jsonp同源策略JsonpjQuery对JSONP的实现CORS简介两种请求 同源策略与Jsonp同源策略同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功... 查看详情

json跨域请求

轻松搞定JSONP跨域请求一、同源策略要理解跨域,先要了解一下“同源策略”。所谓同源是指,域名,协议,端口相同。所谓“同源策略“,简单的说就是基于安全考虑,当前域不能访问其他域的东西。一些常见的是否同源示例... 查看详情

跨域请求问题(代码片段)

跨域请求同源策略什么是同源策略同源策略是浏览器的安全策略,请求发过去,服务器返回了数据但是被浏览器拦截了同源策略要求:请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同CORS(跨域资源... 查看详情

跨域

浏览器的同源策略浏览器有一个同源策略,它会阻止非同源的请求。非同源是指域名不同或者端口不同。浏览同源策略只对表单、ajax请求生效,不同拦截src的请求。​例如:我在127.0.0.1:8000的页面去调用127.0.0.1:8001/api/test,就会被... 查看详情

ajax基础4--什么是跨域以及如何解决跨域(代码片段)

同源策略和jsonp同源策略(⭐⭐⭐)什么是同源什么是同源策略跨域(⭐⭐⭐)什么是跨域浏览器对跨域请求的拦截如何实现跨域数据请求`JSONP`什么是`JSONP`(⭐⭐⭐)`JSONP`的实现原理(⭐⭐⭐)自己实现一个简单的`JSO... 查看详情

跨域请求(代码片段)

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