一、什么是跨域

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

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. 20155308 2016-2017-2 《Java程序设计》第10周学习总结

    20155308 2016-2017-2 <Java程序设计>第10周学习总结 教材学习内容总结 网络概述 计算机网络:通过一定的物理设备将处于不同位置的计算机连接起来组成的网络,这个网络 ...

  2. centos安装smokeping

    本文摘自网友博客,并亲自验证 博客地址:https://blog.csdn.net/erica_yue/article/details/78455101 1.安装依赖包: yum install -y ...

  3. SaltStack入门篇(六)之部署Redis主从实现和Job管理

    一.部署Redis主从 需求: 192.168.56.11是主,192.168.56.12是从 redis监听自己的ip地址,而不是0.0.0.0 分析: linux-node1 安装 配置 启动 l ...

  4. 原生WebGL场景中绘制多个圆锥圆柱

    前几天解决了原生WebGL开发中的一个问题,就是在一个场景中绘制多个几何网格特征不同的模型,比如本文所做的绘制多个圆锥和圆柱在同一个场景中,今天抽空把解决的办法记录下来,同时也附上代码.首先声明,圆柱 ...

  5. 使用calendar日历插件实现动态展示会议信息

    效果图如下,标红色为有会议安排,并跳转详细会议信息页面. html页面 <%@ page contentType="text/html;charset=UTF-8"%> ...

  6. 【MySQL 数据库】MySQL目录

    目录 [第一章]MySQL数据概述 [第二章]MySQL数据库基于Centos7.3-部署 [MySQL解惑笔记]Centos7下卸载彻底MySQL数据库 [MySQL解惑笔记]忘记MySQL数据库密 ...

  7. LeetCode 845——数组中的最长山脉

    1. 题目 2. 解答 2.1 方法一 left 数组表示当前元素左边比当前元素小的元素个数,right 数组数组表示当前元素右边比当前元素小的元素个数.在山脉的中间 B[i] 处,其左边和右边肯定都 ...

  8. C语言零碎知识点

    1.  int整形在64位和32位计算机中都占4个字节. 指针在64位占8个字节,32位占4个字节. 2.  数组下标从0开始,a[0]开始,链表下标从1开始,a[1]开始. 3. 条件运算符(con ...

  9. 使用经验风险最小化ERM方法来估计模型误差 开坑

    虽然已经学习了许多机器学习的方法,可只有我们必须知道何时何处使用哪种方法,才能将他们正确运用起来. 那不妨使用经验最小化ERM方法来估计 . 首先: 其中, δ代表训练出错的概率 k代表假设类的个数 ...

  10. UI优秀框架(库)

    1.vux 官网:https://doc.vux.li/zh-CN/ Github:https://github.com/airyland/vux 13818  Stars  3064 Forks   ...