ajax处理跨域有几种方式?实现原理是什么?

一、什么是跨域

我们先回顾一下域名地址的组成:

http:// www . google : 8080 / script/jquery.js

      http:// (协议号)

www  (子域名)

google (主域名)

8080 (端口号)

script/jquery.js (请求的地址)

* 当协议、子域名、主域名、端口号中任意一各不相同时,都算不同的“域”。

* 不同的域之间相互请求资源,就叫“跨域”。

比如:http://www.abc.com/index.html 请求 http://www.def.com/sever.php

二、出现跨域问题的情况

由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只能访问本地的资源,而不能跨域访问。

比如说你的网站域名是aaa.com,想要通过AJAX请求bbb.com域名中的内容,浏览器就会认为是不安全的,所以拒绝访问。

会出现跨域问题的几种情况:

三、处理跨域的方法1 -- 代理

这种方式是通过后台(ASP、PHP、JAVA、ASP.NET)获取其他域名下的内容,然后再把获得内容返回到前端,这样因为在同一个域名下,所以就不会出现跨域的问题。

比如在北京(www.beijing.com/sever.php)和上海(www.shanghai.com/sever.php)各有一个服务器,北京的后端(www.beijing.com/sever.php)直接访问上海的服务,然后把获取的响应值返回给前端。也就是北京的服务在后台做了一个代理,前端只需要访问北京的服务器也就相当与访问了上海的服务器。这种代理属于后台的技术,所以不展开叙述。

四、处理跨域的方法2 -- JSONP

假设在http://www.aaa.com/index.php这个页面中向http://www.bbb.com/getinfo.php提交GET请求,那么我们在www.aaa.com页面中添加如下代码:


1

2

3

4

5

6

7

var eleScript= document.createElement("script"); //创建一个script元素

eleScript.type = "text/javascript"; //声明类型、

eleScript.src = "http://www.bbb.com/getinfo.php"; //添加src属性 引入跨域访问的url

document.getElementsByTagName("HEAD")[0].appendChild(eleScript); //在页面中添加新创建的script元素

当GET请求从http://www.bbb.com/getinfo.php返回时,可以返回一段JavaScript代码,这段代码会自动执行,可以用来负责调用http://www.aaa.com/index.php页面中的一个callback函数。看下面一个列子:

www.aaa.com页面中:


1

2

3

4

5

6

7

8

9

10

11

<script>

  function jsonp( json ){

    document.write( json.name ); //输出周星驰

}

<script>

<script src="http://www.bbb.com/getinfo.php"></script>

www.bbb.com页面中:

  jsonp({ "name":"周星驰","age":45 });

也就是在www.aaa.com页面中声明,在www.bbb.com页面中调用。但是JSONP只支持 “GET” 请求,但不支持 “POST” 请求。

五、处理跨域的方法3 -- XHR2(推荐方法)

“XHR2” 全称 “XMLHttpRequest Level2” 是HTML5提供的方法,对跨域访问提供了很好的支持,并且还有一些新的功能。

* IE10一下的版本都不支持

* 只需要在服务器端头部加上下面两句代码:

  header( "Access-Control-Allow-Origin:*" );

  header( "Access-Control-Allow-Methods:POST,GET" );

时间: 2024-10-04 03:33:37

ajax处理跨域有几种方式?实现原理是什么?的相关文章

php跨域的几种方式

PHP实现跨域的几种形式 1.JSONP(JSON with padding)原理 利用html里面script标签可以加载其他域下的js这一特性,使用script src的形式来获取其他域下的数据,但是,因为是通过标签引入的,所以,会将请求到的JSON格式的数据作为js去运行处理,显然这样运行是不行的. 因此,就需要提前将返回的数据包装一下,封装成函数进行运行处理,函数名通过接口传参的方式传给后台,后台解析到函数名后在原始数据上包裹这个函数名,发送给前端.(JSONP 需要对应接口的后端的配合

前端跨域问题各种解决方式及原理

跨域的各种解决方式及原理 因为浏览器有某些安全级别的限制,例如,同源策略,所以在进行浏览器端的web应用开发的时候,经常会遇到跨域问题. 同源策略:只有在同源的情况下(同域名,同协议,同端口)才能进行数据交互 跨域问题报错:XMLHttpRequest cannot load https://api.douban.com/v2/movie/in_theaters. No 'Access-Control-Allow-Origin' header is present on the requeste

解决浏览器跨域的几种方式

1.什么是跨域问题 在页面中使用js访问其他网站的数据时,就会出现跨域问题,比如在网站中使用ajax请求其他网站的天气.快递或者其他数据接口时,以及hybrid app中请求数据,浏览器会提     示一下错误: XMLHttpRequest cannot load http://你请求的域名. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://当前页的域  

AJAX实现跨域的三种方法

转 由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只能访问本地的资源,而不能跨域访问. 比如说你的网站域名是aaa.com,想要通过AJAX请求bbb.com域名中的内容,浏览器就会认为是不安全的,所以拒绝访问. 会出现跨域问题的几种情况: 后台在百度上寻找解决方案解决了这个问题,一共总结出三种方案:代理.JSONP.XHR2(XMLHttpRequest Level 2). 第一种方法 代理:这种方式是通过后台(ASP.PHP.Ja

关于跨域,以及跨域的几种方式

首先我们来想一想 为什么会有跨域这个名词的出现呢? 跨域又是什么呢?为何要跨域? 浏览器的同源策略又是什么?怎么解决? jsonp又是什么? 跨域的原理又是什么呢? 名词解释: 跨域: 浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了. 上面提到的,同域的概念又是什么呢??? 简单的解释就是相同域名,端口相同,协议相同 同源策略: 请求的url地址,必须与浏览器上的url地址处于同域上,

深入浅出:了解jsonp跨域的九种方式

什么是“”跨域”: 跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容.由于安全原因,跨域访问是被各大浏览器所默认禁止的.当一个域与其他域建立了信任关系后,2个域之间不但可以按需要相互进行管理,还可以跨网分配文件和打印机等设备资源,使不同的域之间实现网络资源的共享与管理.这就形成了“跨域”. 广义的跨域: 1.) 资源跳转: A链接.重定向.表单提交2.) 资源嵌入: <link>.<script>.<img>.&l

SpringBoot设置跨域的几种方式

什么是跨域? 浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域 原因: 由于浏览器的同源策略, 即a网站只能访问a网站的内容,不能访问b网站的内容. 注意: 跨域问题只存在于浏览器,也就是说当你的前端页面访问后端简单请求的接口时,返回值是有的,只是服务器没有在请求头指定跨域的信息,所以浏览器自动把返回值给"屏蔽了". 经过上面的了解,可以得出几个解决跨域的方法(不考虑前端实现): 1.服务端指定跨域信息 2.在web页面与服务器之间加一层服务指定跨域信

跨域的几种方式

一.什么是跨域 由于浏览器同源策略,凡是发送请求的url的协议.域名.端口三者之间任意一与当前页面地址不同即为跨域: 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js  http:// (协议号) www  (子域名) google (主域名) 8080 (端口号) script/jquery.js (请求的地址) * 当协议.子域名.主域名.端口号中任意一各不相同时,都算不同的“域”. * 不同的域之间相互请求资源,就

浅谈跨域的N种方式

奇葩方式:谷歌浏览器添加属性 --disable-web-security 邮件chrome浏览器,切换到快捷tab,在目标框追加--disable-web-security,如果目标URL带双引号,则追加--args --disable-web-security,重启浏览器会提示”不受支持的disable-web-security属性“,表示修改已生效. HTML5方式,后台设置相应头 Access-Control-Allow-Origin 常规方式:jsonp,代理proxy