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的网站请求数据。


相关文章
|
20小时前
|
数据库 Python
Python用于Web开发
Python是一种功能强大的编程语言,它有许多用于Web开发的库和框架。在本文中,我们将介绍如何使用Python开发Web应用程序。
17 3
|
3天前
|
资源调度 前端开发 JavaScript
深入理解Webpack:现代Web开发的打包工具
Webpack是一款强大的开源JavaScript模块打包工具,它在现代Web开发中扮演着至关重要的角色。通过Webpack,开发者可以有效地管理和打包项目中的各种资源,包括JavaScript、CSS、图片等,使Web应用程序更具可维护性和性能。在本博客中,我们将深入研究Webpack的核心概念、配置、加载器、插件和最佳实践,以帮助您更好地掌握这个强大的工具。
|
4天前
|
SQL 开发框架 API
python开发web
Python是一种高级编程语言,具有简洁易读的语法和强大的功能。在Web开发中,Python可以用于构建各种类型的应用程序,如网站、Web应用程序、API等。Python常用的Web开发框架有Django、Flask、Tornado等。
|
10天前
|
存储 Rust 前端开发
给 Web 前端工程师看的用 Rust 开发 wasm 组件实战
wasm 全称 WebAssembly,是通过虚拟机的方式,可以在服务端、客户端如浏览器等环境执行的二进制程序。它有速度快、效率高、可移植的特点
26 0
|
24天前
|
设计模式 前端开发 Java
使用Java MVC开发高效、可扩展的Web应用
本文将介绍如何使用Java MVC(Model-View-Controller)模式来开发高效、可扩展的Web应用。我们将深入探讨MVC模式的核心概念,以及如何在Java中实现这一体系结构。通过合理地分离业务逻辑、用户界面和数据处理,我们可以构建出易于维护和扩展的Web应用程序。
|
27天前
|
JavaScript 前端开发 Java
44【Java生态前后端】开发web应用使用到的技术 & Vue框架+Java开发Web应用的步骤
使用Vue框架进行前端开发,实现应用的交互和界面展示。
33 1
|
JavaScript 前端开发 Linux
Python全栈 Web(Ajax JQuery-AJAX 跨域请求)
Flask、Python、Django、框架、服务器、客户端、浏览器、交互、WEB、Python前端、CSS、JAVA、HTML、H5、PHP、JavaScript、JQuery、分布式开发
5156 0
|
JavaScript 前端开发 Java
WEB项目后端跨域请求
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.
747 0
相关产品
云迁移中心
推荐文章
更多