一、什么是跨域

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

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. 2017-2018-1 20155319《信息安全技术》实验二——Windows口令破解

    2017-2018-1 20155319<信息安全技术>实验二--Windows口令破解 实验环境 试验系统:Windows 2003 实验工具:LC5.SuperDic 实验原理 一.口 ...

  2. 北京Uber优步司机奖励政策(4月13日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  3. Drupal views 学习之初识

    1. 简介 用过Yii框架的同学,应该都会用到过GridView和ListView组件.可以很方便的用网格或列表展示内容. 例如淘宝: 网格显示 列表显示 2. 使用view可以方便的配出类似上面的展 ...

  4. 电信NB-IOT的温湿度采集器开发记录

    1. 首先打开浏览器,登录电信商用服务器,上传profile文件 2. 上传编解码插件在,注意的是,上传编解码插件是电信测试用服务器平台(不同的网址),反正不明白电信搞啥幺蛾子,得两个地方去上传 3. ...

  5. 海思NB-IOT的SDK里面写KV键值对值掉电保存参数

    1. 写函数,ICCID_CTRL_KEY  这个是键,有些是海思已经使用的,所以自己定义的时候要错开,函数的第二个参数是数据指针,第三个参数是数据长度 #define ICCID_CTRL_KEY ...

  6. kali2.0下JAVA安装

    参考网址:http://www.blackmoreops.com/2013/10/26/how-to-install-java-jdk-in-kali-linux/ 1.下载javase,http:/ ...

  7. Electron小记

    一.安装 1.安装NodeJS 2.安装electronjs:npm install -g electron --unsafe-perm=true --allow-root 安装完,环境为: Node ...

  8. Python基础灬dict&set

    字典dict 字典使用键-值(key-value)存储,具有极快的查找速度. dict基本操作 取值 a_dict = {'name': 'jack', 'age': 18} print(a_dict ...

  9. Your funds transfer has been delayed

    Hello from Amazon. Your funds transfer in the amount of 9,422.88 USD has been delayed because the cr ...

  10. 15 分钟用 ML 破解一个验证码系统

    人人都恨验证码——那些恼人的图片,显示着你在登陆某网站前得输入的文本.设计验证码的目的是,通过验证你是真实的人来避免电脑自动填充表格.但是随着深度学习和计算机视觉的兴起,现在验证码常常易被攻破. 我拜 ...