js中跨域请求原理及2种常见解决方案

一、同源策略:

说到跨域请求,首先得说说同源策略:

1995年,同源政策是由 Netscape 公司引入浏览器的。目前,所有浏览器都实行了这个政策。

同源策略是浏览器的一种安全策略,所谓同源是指,域名,协议,端口完全相同;目的就是为了保证用户信息的安全,防止恶意的网站窃取数据,防范跨站脚本的攻击,禁止客户端脚本(如 JavaScript)对不同域的服务进行跨站调用。

举例来说,http://www.example.com/dir/page.html 这个网址
协议是 ttp://
域名是 www.example.com
端口是 80(默认端口可以省略)
它的同源情况如下:
同源:
http://www.example.com/dir2/other.html
不同源:
http://example.com/dir/other.html:不同源(域名不同)
http://v2.www.example.com/dir/other.html:不同源(域名不同)
http://www.example.com:81/dir/other.html:不同源(端口不同)

二、跨域请求:

所谓的跨域访问或者跨域请求,就是是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。

三、跨域解决的两种常用方法:

项目中常用的两种解决方案主要是:JSONP及CORS。

1、JSONP:

基本思想就是:网页通过添加一个<script src=‘’>元素,向服务器请求JSON数据(<script> 的src属性获得js代码, 不受同源政策限制)。服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。

注:用 JSONP 获取的不是 JSON 数据,而是可以直接运行的 JavaScript 语句。由于script脚本只可以通过get发送请求,所以jsonp这种方法只可以发送get请求,无法发送post请求。

具体做法:使用jQuery封装的Ajax,只需在客户端的Ajax请求的url中加入url?callback=?即可;

     服务器端需写入var callback = req.query.callback;返回的value需要封装成json,res.send(callback+‘(‘+json+‘)‘)。

2、CORS(Cross-Origin Resource Sharing):

跨域资源共享是一份浏览器技术的规范,以避开浏览器的同源策略,是 JSONP 模式的现代版。CORS背后的思想,就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。

与 JSONP 不同,CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。用 CORS 可以让前端工程师用一般的 XMLHttpRequest,这种方式的错误处理比 JSONP 要来的好;另一方面,JSONP 可以在不支持 CORS 的老旧浏览器上运作。现代的浏览器都支持 CORS。

具体做法:客户端不需要做什么,只需要在服务器端发送一个响应头即可:‘Access-Control-Allow-Origin’;

       如若允许所有域访问:Access-Control-Allow-Origin: *;如:header("Access-Control-Allow-Origin: *");

     如若只允许指定域访问:Access-Control-Allow-Origin: 域名A;如:header("Access-Control-Allow-Origin: http://www.test2.com");

时间: 2024-08-18 09:10:37

js中跨域请求原理及2种常见解决方案的相关文章

js跨域请求数据的3种常用的方法

由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript   在原生js(没有jQuery和ajax支持)的情况下,通常客户端代码是这样的(我假设是在localhost:8080的端口下的http://localhost:8080/webs/i.mediapower.mobi/wutao/index.html页面的body标签下面加入以下代码): <script

js跨域请求方式 ---- JSONP原理解析

这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下 跨域请求数据解决方案主要有如下解决方法: 1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 Html5的XDomainRequest Flash request 分开说明: 一.JSONP: 直观的理解: 就是在客户端动态注册一个函数 function a(data),然后将函数名传到服务器,服务器返回一个a({/*json*/})到客户端运行,这样就调用客户端的 function a(data),从而

JS中跨域技术集锦

 图像ping 1.简介: 图像ping是与服务器进行简单.单向的跨域通信的一种方式,请求的数据是通过查询字符串的形式发送的,而相应可以是任意内容,但通常是像素图或204相应(No Content). 2.使用方法: var img = new Image(); img.onload = img.onerror = function(){ alert("done!"); }; img.src = "http://www.example.com/test?name=Nicalo

前端跨域请求原理及实践

前端跨域请求原理及实践 2017-03-03 前端大全 (点击上方公众号,可快速关注) 作者:高鹏 tingandpeng.com/2016/09/05/前端跨域请求原理及实践/ 如有好文章投稿,请点击 → 这里了解详情 一. 跨域请求的含义 浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本(如 JavaScript)对不同域的服务进行跨站调用. 一般的,只要网站的 协议名protocol. 主机host. 端口号port 这三个中的任意一个不同,网站间的数据请求与传输便构成了跨域调用.

.net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器

1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.WebForm使用母版页进行登录时候的验证 //新建一个页面父类 public abstract class BasePage:Page { protected void Page_Load(object sender, EventArgs e) { //1.身份验证的方法 Session if (Se

跨域请求资源的几种方式

跨域请求资源的几种方式 由于浏览器同源策略,凡是发送请求URL的协议.域名.端口三者之间任意一与当前页面地址不同即为跨域. (1)JSONP(jsonp跨域get请求) 这种方式主要是通过动态创建一个script标签,浏览器对script的资源引用没有同源限制,同时资源加载到页面后会立即执行:(创建script标签向不同域提交http请求的不会被拒绝的方法,jsonp标签的src属性是没有跨域限制的) 实际项目中JSONP通常用来获取json格式数据,这时前后端通常约定一个参数callback,

JSONP跨域的原理解析( 一种脚本注入行为)

JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制, 被称为“some-Origin Policy”(同源策略).这一策略对于JavaScript代码能够访问的页面内容作了很重要的限制, 即JavaScript只能访问与包含它的文档在同一域下的内容. JavaScript这个安全策略在进行多Iframe或多窗口编程.以及Ajax编程时显得尤为重要.根据这个策略,在baidu.com 下的页面中包含的JavaScript的代码,不

JS跨域请求

1. 同源策略 所有的浏览器都遵守同源策略,这个策略能够保证一个源的动态脚本不能读取或操作其他源的http响应和cookie,这就使浏览器隔离了来自不同源的内 容,防止它们互相操作.所谓同源是指协议.域名和端口都一致的情况.举例来说,首先在Nginx上配置两个虚拟主机,一个监听80端口,另一个监听81端 口: server {           listen 80;           server_name localhost;                      location /

js跨域请求实现

js代码 var url = zfba2url + "/fzyw/xzfy/smcl/autoUpdateByWS.action"; var data = { "writid": writid, "reportName": reportname }; $.ajax({ contentType: "application/x-www-form-urlencoded;charset=UTF-8", type : "pos