一、什么是跨域

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

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

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

比如在北京(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页面中添加如下代码:

 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页面中:

 <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” 请求。

三、处理跨域的方法2 -- XHR2(推荐方法)

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

* IE10一下的版本都不支持

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

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

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

关于 “XHR2” 的更多信息大家可以查看官方文档,在这里就不详细叙述了,总之这是这个很好用的方法。

四、注意事项

  1、ajaxjsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装;

  2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

  3、所以说,其实ajaxjsonp的区别不在于是否跨域ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。

  4、还有就是,jsonp是一种方式或者说非强制性协议,如同ajax一样,它也不一定非要用json格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用jsonp提供公开服务。

  5、jsonp能解决的ajax跨域请求其实相当有限,推荐还是使用CROS,因为Jsonp的请求只能是get虽然在上面演示中,我设置的type为post,但是实际上发的请求还是get。

第114天:Ajax跨域请求解决方法(二)的更多相关文章

  1. 第113天:Ajax跨域请求解决方法

    一.原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步:设置状态监听函数 第三步:open一个连接,true是异步请求 第四部:send一个请求,可以发送一个对象和字符串,不需要 ...

  2. WebApi Ajax 跨域请求解决方法(CORS实现)

    概述 ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题, 特别 ...

  3. WebApi Ajax 跨域请求解决方法(CORS实现)(作者:jianxuanbing)

    概述 ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特别各 ...

  4. Access to XMLHttpRequest at 'XXX' from origin 'XX' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present o AJAX跨域请求解决方法

    今天出现了一个问题找了好久先看代码: 这可能是个BUG吧插入代码: dataType: 'jsonp', crossDomain: true, 最终:

  5. Nginx反向代理、CORS、JSONP等跨域请求解决方法总结

    由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为 ...

  6. 客户端ajax请求为实现Token验证添加headers后导致正常请求变为options跨域请求解决方法

    客户端为了实现token认证,通过Jquery的ajaxSetup方法全局配置headers: 全局配置headers后会导致部分不需要token认证的请求变为options请求,导致跨域访问.报错信 ...

  7. 基于.Net Framework 4.0 Web API开发(5):ASP.NET Web APIs AJAX 跨域请求解决办法(CORS实现)

    概述:  ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特 ...

  8. Ajax跨域请求action方法,无法传递及接收cookie信息(应用于系统登录认证及退出)解决方案

    最近的项目中涉及到了应用ajax请求后台系统登录,身份认证失败,经过不断的调试终于找到解决方案. 应用场景: 项目测试环境:前端应用HTML,js,jQuery ajax请求,部署在Apache服务器 ...

  9. Ajax跨域请求解决方式

    前端 jQuery方式 .ajax({ type: "POST", url: "http://xxx.com/api/test", dataType: 'jso ...

随机推荐

  1. 20155235 《Java程序设计》 实验五 Java网络编程及安全

    20155235 <Java程序设计> 实验五 Java网络编程及安全 实验内容 1.掌握Socket程序的编写: 2.掌握密码技术的使用: 3.设计安全传输系统. 实验要求 没有Linu ...

  2. rman中 Backup Set 与 Image Copy 优缺点比较

    Backup Set: 一个备份集中可以包含多个数据文件,存储High Water Mark 下的数据块,并且可以采用压缩方式进行,故大小要小于原始数据文件的大小.restore与 recover的开 ...

  3. python 多线程笔记(5)-- 生产者/消费者模式

    我们已经知道,对公共资源进行互斥访问,可以使用Lock上锁,或者使用RLock去重入锁. 但是这些都只是方便于处理简单的同步现象,我们甚至还不能很合理的去解决使用Lock锁带来的死锁问题. 要解决更复 ...

  4. 【转载】Direct3D纹理映射

    原文:Direct3D纹理映射 更详细的文章:DirectX中的纹理映射相关技术 (转)   创建纹理对象 1: HRESULT CreateTexture( 2:   UINT Width,//宽度 ...

  5. 3110: [Zjoi2013]K大数查询

    3110: [Zjoi2013]K大数查询 https://lydsy.com/JudgeOnline/problem.php?id=3110 分析: 整体二分+线段树. 两种操作:区间加入一个数,区 ...

  6. Shell if 判断语句参数

    [ -a FILE ] 如果 FILE 存在则为真. [ -b FILE ] 如果 FILE 存在且是一个块特殊文件则为真. [ -c FILE ] 如果 FILE 存在且是一个字特殊文件则为真. [ ...

  7. 【MYSQL备份】利用mysqldump将一个数据库复制到另一个数据库

    假设要将服务器A上的数据库test备份到服务器B 1.在服务器B上新建数据库cp_test mysql> create database cp_test; Query OK, row affec ...

  8. Cannot get connection for URL jdbc:oracle:thin:调用中无效参数

    这个报错明显是连接数据库的url没有写对,但是,我要说的是但是,同样的代码生产没有问题,而测试环境报错了.最终哥找到那个错误,jdbc连接数据库时,有ResultSet,PreparedStateme ...

  9. php oci8 小试

    Oracle_db.class.php <?phpclass Oracle_db{    public $link;    public function __construct(){      ...

  10. 001----Mysql隔离级别

    一:事务隔离级别 mysql数据库的隔离界别如下: 1, READ UNCOMMITTED(未提交读) 事务中的修改,即使没有提交,对其它事务也是可见的.  这样会造成脏读(Dirty Read)的问 ...