欢迎来到知了汇智!
联系电话:知了汇智-电话号码 028-62016472 / 13228113191

ajax跨域请求原理分析和解决方法介绍-知了汇智

ajax跨域请求原理分析和解决方法介绍

  一、跨域概述

  1.1 含义

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

  最初,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页”同源”。所谓”同源”指的是”三个相同”。

  协议相同

  域名相同

  端口相同

  举例来说:

  http://www.example.com/dir/page.html这个网址,协议是http://,域名是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:不同源(端口不同)


  1.2 目的

  同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。

  设想这样一种情况:A网站是一家银行,用户登录以后,又去浏览其他网站。如果其他网站可以读取A网站的 Cookie,会发生什么?很显然,如果 Cookie 包含隐私(比如存款总额),这些信息就会泄漏。更可怕的是,Cookie 往往用来保存用户的登录状态,如果用户没有退出登录,其他网站就可以冒充用户,为所欲为。因为浏览器同时还规定,提交表单不受同源政策的限制。

  由此可见,”同源政策”是必需的,否则 Cookie 可以共享,互联网就毫无安全可言了。

  1.3 限制范围

  随着互联网的发展,”同源政策”越来越严格。目前,如果非同源,共有三种行为受到限制。

  (1) Cookie、LocalStorage 和 IndexDB 无法读取。

  (2) DOM 无法获得。

  (3) AJAX 请求不能发送。

  虽然这些限制是必要的,但是有时很不方便,合理的用途也受到影响。下面,我将详细介绍,如何规避上面三种限制。

ajax跨域请求原理分析和解决方法介绍

 

  解决方法

  解决跨域问题,有如下三种方式:

  1、使用jsonp

  2、服务器代理

  3、CORS技术

  1、使用JSONP

  jsonp解决跨域问题的原理是,浏览器的script标签是不受同源策略限制的,我们可以在script标签中访问任何域名下的资源文件。利用这一特性,用script标签从服务器中请求数据,同时服务器返回一个带有方法和数据的js代码,请求完成,调用本地的js方法,来完成数据的处理。

  前端代码设置:

  $.ajax({
  url: "http://locahost:8080/serverManager/getNameList",
  type:'get',
  dataType: "jsonp",
  //传递给请求处理程序或页面的,
       用以获得jsonp回调函数名的参数名(一般默认为:callback)
  jsonp: "callback",
  //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,
       也可以不写这个参数,jQuery会自动为你处理数据
  jsonpCallback:"getResult",
  success: function(data){
  },
  error: function(){
  alert('fail');
  }
  });


  后台代码:

  //1. http响应头部增加如下字段,这个可以不要嘛???,需要有待测试
  Access-Control-Allow-Origin:*
  //2.返回的字符串要符合jsonp格式,形如:
  "getResult('json字符串')"


  jsonp字符串:

  例如:

  jsoncallback({
  "message":"获取成功",
  "state":"1",
  "result":{"name":"工作组1","id":1,"description":"11"}
  })


  从格式来看,jsonp是在json的基础上包装了一个方法名,此方法名是前端请求传过来的,如请求地址为:http://localhost:9999/tookApp/tbk/getItem?callback=JSONP_CALLBACK,那么方法名就是JSONP_CALLBACK。

  jsonp的缺点:

  1、JSONP是一种非官方的方法,而且这种方法只支持GET方法。

  2、JSONP的实现需要服务器配合,如果是访问的是第三方的服务器,我们没有修改服务器的权限,那么这种方式是不可行的.

  2、服务器代理

  这种方式运用的就是服务器的反向代理技术,控制客户端和服务器的访问都从代理服务器经过,比如用nginx作为服务器代理,在nginx上配置客户端和第三方服务的反向代理,这样就可保证客户端、第三方是同源的了,同一个源,都来自代理服务器。

  缺点:

  开发比较麻烦,对开发环境比较严格,需要在本机上配置代理服务器。

  优点:

  完美解决使用jsonp,第三方服务没有修改权限的问题。程序的代码侵入性小,代码级别不需要考虑跨域问题。

  3、CORS技术

  CORS是跨源资源分享(Cross-Origin Resource Sharing)的缩写。它是W3C标准,是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求,CORS允许任何类型的请求。

  在服务端设置response header中Access-Control-Allow-Origin字段。

  浏览器报错

  跨域前端使用ajax请求时,浏览器或给出这个报错信息·No 'Access-Control-Allow-Origin' header is present on the requested resource.

  以上是项目中使用C++ 开发 http和https web server时,遇到问题记录,避免下次再次填坑。

       版权声明:本文来源于网络,由知了堂搜集整理,仅供大家学习

项目教学·项目驱动

132 2811 3191
预约免费试学
点击咨询
预约试学