Web跨域请求与解决方法

简介: Web跨域请求与解决方法

1. 什么是跨域请求

  跨域请求就是指:当前发起请求的域与该请求指向的资源所在的域不同时的请求。这里的域指的是这样的一个概念:我们认为如果 “协议 + 域名 + 端口号” 均相同,那么就是同域


2. 浏览器的同源策略


同源策略(Same origin policy)是一种约定,它是浏览器最核心也是最基本的安全功能。出于安全考虑,浏览器限制从JS脚本发起的跨源HTTP请求。 例如,XMLHttpRequest和Fetch API都遵循同源策略。


域名、协议、端口有一个不同就不是同源,三者均相同,这两个网站才是同源

DOM 层面的同源策略:限制了来自不同源的”Document”对象或 JS 脚本,对当前“document”对象的读取或设置某些属性


Cookie和XMLHttprequest层面的同源策略:禁止 Ajax 直接发起跨域HTTP请求(其实可以发送请求,结果被浏览器拦截,不展示),同时 Ajax 请求不能携带与本网站不同源的 Cookie。


同源策略的非绝对性:< s c r i p t > < i m g > < i f r a m e > < l i n k > < v i d e o > < a u d i o > <script><img><iframe><link><video><audio><script><img><iframe><link><video><audio>等带有src属性的标签可以从不同的域加载和执行资源。


其他插件的同源策略:flash、java applet、silverlight、googlegears等浏览器加载的第三方插件也有各自的同源策略,只是这些同源策略不属于浏览器原生的同源策略,如果有漏洞则可能被黑客利用,从而留下XSS攻击的后患


因为同源策略的限制,不同协议(http、https)、域名或者端口无法直接进行JS ajax请求。 同源策略只针对于浏览器端,浏览器一旦检测到请求的结果的域名不一致后,会堵塞请求结果。这里注意,跨域请求是可以发去的,但是请求响应response被浏览器堵塞了。


那么问题又来了,如果恶意网站使用这个方法伪造一个转账请求,是不是就可以得逞了呢?答案是否定的。因为同源策略限制了不同源脚本之间的访问,也就是说恶意js脚本无法获取用户在银行网站的Cookie(网站身份验证的token会短期存放在Session中或较长期存放在Cookie中),而实际上在JS跨域请求时,浏览器既不会带跨域网站的cookie,也不会带上恶意网站的cookie。


另外,浏览器为什么仅仅限制读(即浏览器拦截请求结果)呢?一方面如果访问的是黑网站,那么网站无法跟据请求结果继续下一步的操作,如不断地猜测密码;另一方面如果访问的是白网站,block掉请求结果,应该是考虑到了请求结果可能会使得页面重定向,或者是给网页添加一个恶意的iframe之类的。


3.基于jsonp实现的跨域请求

JSONP 的缺点则是:它只支持 GET 请求而不支持 POST 等其它类型的 HTTP 请求;它只支持跨域 HTTP 请求这种情况,不能解决不同域的两个页面之间如何进行 JavaScript 调用的问题。


4.基于Cors实现的跨域请求

查看:Cors解决跨域请求


5.nginx反向代理解决跨域问题

6、Cors与JSONP的比较


JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。


相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
5月前
|
应用服务中间件 数据安全/隐私保护
Tomcat【部署 02】Web端403 Access Denied You are not authorized to view this page解决方法(Tomcat 10.2.12 版本)
Tomcat【部署 02】Web端403 Access Denied You are not authorized to view this page解决方法(Tomcat 10.2.12 版本)
150 0
|
6月前
|
小程序 程序员 开发工具
微信web开发者工具无法打开的六种解决方法
微信web开发者工具无法打开的六种解决方法
189 0
|
10月前
|
C++
Visual Studio提示“无法启动IIS Express Web服务器”的解决方法
Visual Studio提示“无法启动IIS Express Web服务器”的解决方法
Visual Studio提示“无法启动IIS Express Web服务器”的解决方法
|
12月前
|
XML Java 应用服务中间件
Java web项目怎么创建 & 没有出现web.xml的解决方法
Java web项目怎么创建 & 没有出现web.xml的解决方法
577 0
|
存储 前端开发 安全
Web开发中的跨域问题及其解决方法
跨域是指浏览器限制了来自不同源的客户端脚本在同一页面中执行的能力。本文将讨论什么是跨域,为什么需要跨域,以及解决跨域问题的常用方法。
259 0
|
JavaScript 前端开发 Linux
Python全栈 Web(Ajax JQuery-AJAX 跨域请求)
Flask、Python、Django、框架、服务器、客户端、浏览器、交互、WEB、Python前端、CSS、JAVA、HTML、H5、PHP、JavaScript、JQuery、分布式开发
5198 0
|
Web App开发 JavaScript 前端开发
Web页中级联下拉选择框问题的解决方法
示范中心项目里有一些页面要求几个下拉选择框的内容是具有关联的关系的,例如在编辑一个实验项目时,要先在一个下拉框里选择该项目所在的示范中心,这时实验室下拉框里的内容要根据用户选中的示范中心改变。为了实现这个目的,我们先后想了几种方法。
1562 0