今天来记录一下关于ajax跨域的一些问题。以备不时之需。
　　
　　跨域
　　
　　同源策略限制
　　
　　同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。
　　
　　解决方式
　　
　　通常来说，比较通用的有如下两种方式，一种是从服务器端下手，另一种则是从客户端的角度出发。二者各有利弊，具体要使用哪种方式还需要具体的分析。
　　
　　服务器设置响应头
　　
　　服务器代理
　　
　　客户端采用脚本回调机制。
　　
　　方式一
　　
　　Access-Control-Allow-Origin 关键字只有在服务器端进行设置才
　　
　　会生效。也就是说即使再客户端使用
　　
　　xmlhttprequest.setHeaderREquest('xx','xx');
　　
　　1
　　
　　1
　　
　　也不会有什么效果。
　　
　　正常ajax请求
　　
　　下面来模拟一下ajax非跨域请求的案例实现。
　　
　　test1.html
　　
　　<!DOCTYPE html>
　　
　　<html lang="en">
　　
　　<head>
　　
　　<meta charset="UTF-8">
　　
　　<title>ajax 测试</title>
　　
　　</head>
　　
　　<body>
　　
　　<input type="button" value="Test" onclick="crossDomainRequest()">
　　
　　<div id="content"></div>
　　
　　<script>
　　
　　var xhr = new XMLHttpRequest();
　　
　　var url = 'http://localhost/learn/ajax/test1.php';
　　
　　function crossDomainRequest() {
　　
　　document.getElementById('content').innerHTML = "<font color='red'>loading...</font>";
　　
　　// 延迟执行
　　
　　setTimeout(function () {
　　
　　if (xhr) {
　　
　　xhr.open('GEt', url, true);
　　
　　xhr.onreadystatechange = handle_response;
　　
　　xhr.send(null);
　　
　　} else {
　　
　　document.getElementById('content').innerText = "不能创建XMLHttpRequest对象";
　　
　　}
　　
　　}, 3000);
　　
　　}
　　
　　function handle_response() {
　　
　　var container = document.getElementById('content');
　　
　　if (xhr.readyState == 4) {
　　
　　if (xhr.status == 200 || xhr.status == 304) {
　　
　　container.innerHTML = xhr.responseText;
　　
　　} else {
　　
　　container.innerText = '不能跨域请求';
　　
　　}
　　
　　}
　　
　　}
　　
　　</script>
　　
　　</body>
　　
　　</html>
　　
　　同级目录下的test1.PHP内容如下：
　　
　　<?php
　　
　　echo "It Works.";
　　
　　?>
　　
　　正常ajax请求
　　
　　跨域请求
　　
　　刚才是HTML文件和php文件都在Apache的容器下，所以没有出现跨域的情形，现在把HTML文件放到桌面上，这样再次请求PHP数据的话，就营造了这样一个“跨域请求”了。
　　
　　注意看浏览器的地址栏信息
　　
　　再次进行访问，发现会出现下面的错误信息。
　　
　　跨域出现了问题
　　
　　针对这种情况，比较常见的一个操作就是设置Access-Control-Allow-Origin。
　　
　　格式: Access-Control-Allow-Origin: domain.com/xx/yy.*
　　
　　如果知道客户端的域名或者请求的固定路径，则最好是不使用通配符的方式，来进一步保证安全性。如果不确定，那就是用*通配符好了。
　　
　　后端开发语言为PHP的时候可以再文件开始处这么设置：
　　
　　header("Access-Control-Allow-Origin: *");
　　
　　如果是ASPX页面的话，要这么设置（Java与之类似）：
　　
　　Response.AddHeader("Access-Control-Allow-Origin", "*");
　　
　　1
　　
　　1
　　
　　这时，再次来访问一下刚才的路径。
　　
　　服务器端跨域设置
　　
　　服务器代理模式
　　
　　这种方式应该算是比较常用的，而且被广泛采纳的一个方式了。说代理有点太过于书面化了，其实就是传话儿的。来举个小例子：
　　
　　小明喜欢三班一个叫小红的女孩儿，但是不好意思去要人家的QQ，微信号。然后就托和自己班的女生–小兰。来帮自己去要。所以小兰就相当于一个代理。帮助小明获取原本不能直接获取的小红的联系方式。
　　
　　下面来举个例子说明这个问题。
　　
　　直接的跨域请求
　　
　　修改一下刚才的URL即可，让ajax直接去请求其他网站的数据。
　　
　　<!DOCTYPE html>
　　
　　<html lang="en">
　　
　　<head>
　　
　　<meta charset="UTF-8">
　　
　　<title>ajax 测试</title>
　　
　　</head>
　　
　　<body>
　　
　　<input type="button" value="Test" onclick="crossDomainRequest()">
　　
　　<div id="content"></div>
　　
　　<script>
　　
　　var xhr = new XMLHttpRequest();
　　
　　// var url = 'http://localhost/learn/ajax/test1.php';
　　
　　var url = 'http://api.qingyunke.com/api.php?key=free&appid=0&msg=%E5%93%92%E5%93%92';
　　
　　function crossDomainRequest() {
　　
　　document.getElementById('content').innerHTML = "<font color='red'>loading...</font>";
　　
　　// 延迟执行
　　
　　setTimeout(function () {
　　
　　if (xhr) {
　　
　　xhr.open('GEt', url, true);
　　
　　xhr.onreadystatechange = handle_response;
　　
　　xhr.send(null);
　　
　　} else {
　　
　　document.getElementById('content').innerText = "不能创建XMLHttpRequest对象";
　　
　　}
　　
　　}, 3000);
　　
　　}
　　
　　function handle_response() {
　　
　　var container = document.getElementById('content');
　　
　　if (xhr.readyState == 4) {
　　
　　if (xhr.status == 200 || xhr.status == 304) {
　　
　　container.innerHTML = xhr.responseText;
　　
　　} else {
　　
　　container.innerText = '不能跨域请求';
　　
　　}
　　
　　}
　　
　　}
　　
　　</script>
　　
　　</body>
　　
　　</html>
　　
　　结果如下：
　　
　　代理模式下直接跨域会失败
　　
　　启用代理模式
　　
　　刚才的HTML页面，咱们还是用自己的接口：
　　
　　url = 'http://localhost/learn/ajax/test1.php';
　　
　　1
　　
　　1
　　
　　具体如下：
　　
　　<!DOCTYPE html>
　　
　　<html lang="en">
　　
　　<head>
　　
　　<meta charset="UTF-8">
　　
　　<title>ajax 测试</title>
　　
　　</head>
　　
　　<body>
　　
　　<input type="button" value="Test" onclick="crossDomainRequest()">
　　
　　<div id="content"></div>
　　
　　<script>
　　
　　var xhr = new XMLHttpRequest();
　　
　　var url = 'http://localhost/learn/ajax/test1.php';
　　
　　// var url = 'http://api.qingyunke.com/api.php?key=free&appid=0&msg=%E5%93%92%E5%93%92';
　　
　　function crossDomainRequest() {
　　
　　document.getElementById('content').innerHTML = "<font color='red'>loading...</font>";
　　
　　// 延迟执行
　　
　　setTimeout(function () {
　　
　　if (xhr) {
　　
　　xhr.open('GEt', url, true);
　　
　　xhr.onreadystatechange = handle_response;
　　
　　xhr.send(null);
　　
　　} else {
　　
　　document.getElementById('content').innerText = "不能创建XMLHttpRequest对象";
　　
　　}
　　
　　}, 3000);
　　
　　}
　　
　　function handle_response() {
　　
　　var container = document.getElementById('content');
　　
　　if (xhr.readyState == 4) {
　　
　　if (xhr.status == 200 || xhr.status == 304) {
　　
　　container.innerHTML = xhr.responseText;
　　
　　} else {
　　
　　container.innerText = '不能跨域请求';
　　
　　}
　　
　　}
　　
　　}
　　
　　</script>
　　
　　</body>
　　
　　</html>
　　
　　然后对应的test1.php应该帮助我们实现数据请求这个过程，把“小红的联系方式”要到手，并返回给“小明”。
　　
　　<?php
　　
　　$url = 'http://api.qingyunke.com/api.php?key=free&appid=0&msg=hello%20world.';
　　
　　$result = file_get_contents($url);
　　
　　echo $result;
　　
　　下面看下代码执行的结果。
　　
　　代理模式下的跨域实现
　　
　　jsonp方式
　　
　　JSONP（JSON with Padding） 灵感其实源于在HTML页面中script标签内容的加载，对于script的src属性对应的内容，浏览器总是会对其进行加载。于是：
　　
　　克服该限制更理想方法是在 Web 页面中插入动态脚本元素，该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的，因为同源策略不阻止动态脚本插入，并且将脚本看作是从提供 Web 页面的域上加载的。但如果该脚本尝试从另一个域上加载文档，就不会成功。
　　
　　实现的思路就是：
　　
　　在服务器端组装出客户端预置好的json数据，通过回调的方式传回给客户端。
　　
　　原生实现
　　
　　<!DOCTYPE html>
　　
　　<html lang="en">
　　
　　<head>
　　
　　<meta charset="UTF-8">
　　
　　<title>ajax 测试</title>
　　
　　<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>
　　
　　</head>
　　
　　<body>
　　
　　<input type="text" name="talk" id="talk">
　　
　　<input type="button" value="Test" id="btn">
　　
　　<div id="content"></div>
　　
　　<script type="text/javascript">
　　
　　function jsonpcallback(result) {
　　
　　for(var i in result) {
　　
　　alert(i+":"+result[i]);
　　
　　}
　　
　　}
　　
　　var JSONP = document.createElement("script");
　　
　　JSONP.type='text/javascript';
　　
　　JSONP.src='http://localhost/learn/ajax/test1.php?callback=jsonpcallback';
　　
　　document.getElementsByTagName('head')[0].appendChild(JSONP);
　　
　　</script>
　　
　　</body>
　　
　　</html>
　　
　　服务器端test1.php内容如下：
　　
　　<?php
　　
　　$arr = [1,2,3,4,5,6];
　　
　　$result = json_encode($arr);
　　
　　echo "jsonpcallback(".$result.")";
　　
　　需要注意的是最后组装的返回值内容。
　　
　　来看下最终的代码执行效果。
　　
　　JSONP原生跨域实现
　　
　　JQuery方式实现
　　
　　采用原生的JavaScript需要处理的事情还是蛮多的，下面为了简化操作，决定采用jQuery来代替一下。
　　
　　<!DOCTYPE html>
　　
　　<html lang="en">
　　
　　<head>
　　
　　<meta charset= www.lxinyul.cc/"UTF-8">
　　
　　<title>ajax 测试</title>
　　
　　<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>
　　
　　</head>
　　
　　<body>
　　
　　<input type="text" name="talk" id="talk">
　　
　　<input type="button" value="Test" id="btn">
　　
　　<div id="content"></div>
　　
　　<script type="text/javascript">
　　
　　function later_action(msg) {
　　
　　var element = $("<div><font color='green'>"+msg+"</font><br /></div>");
　　
　　$("#content").append(element);
　　
　　}
　　
　　$("#btn").click(function(){
　　
　　// alert($("#talk").val());
　　
　　$.ajax({
　　
　　url: 'http://localhost/learn/ajax/test1.php',
　　
　　method: 'post',
　　
　　dataType: 'jsonp',
　　
　　data: {"talk": $("#talk").www.luleu99.com val()},
　　
　　jsonp: 'callback',
　　
　　success: function(callback){
　　
　　console.log(callback.content);
　　
　　later_action(callback.content);
　　
　　},
　　
　　error: function(err){
　　
　　console.log(JSON.stringify(err));
　　
　　},
　　
　　});
　　
　　});
　　
　　</script>
　　
　　</body>
　　
　　</html>
　　
　　相应的，test1.php为了配合客户端聊天的需求，也稍微做了点改变。
　　
　　<?php
　　
　　$requestparam = isset($_GET['callback'])?$_GET['callback']:'callback';
　　
　　// 青云志聊天机器人接口： http://api.qingyunke.com/api.php?key=free&appid=0&msg=hello
　　
　　// 接收来自客户端的请求内容
　　
　　$talk = $_REQUEST['talk'];
　　
　　$result = file_get_contents("www.wmyl11.com/ /api.php?key=free&appid=0&msg=$talk");
　　
　　// 拼接一些字符串
　　
　　echo $requestparam . "($result)";
　　
　　最后来查看一下跨域的效果吧。
　　
　　JSONP 跨域实现聊天应用
　　
　　总结
　　
　　至此，关于简单的ajax跨域问题，就算是解决的差不多了。对我个人而言，对于这三种方式有一点点自己的看法。
　　
　　服务器设置Access-Control-Allow-Origin的方式适合信用度高的小型应用或者个人应用。
　　
　　代理模式则比较适合大型应用的处理。但是需要一个统一的规范，这样管理和维护起来都会比较方便。
　　
　　JSONP方式感觉还是比较鸡肋的（有可能是我经验还不足，没认识到这个方式的优点吧(⊙﹏⊙)b）。自己玩玩知道有这么个东西好了。维护起来实在是优点麻烦。

今天来记录一下关于ajax跨域的一些问题。以备不时之需。的更多相关文章

  1. 个人学习记录2：ajax跨域封装

    /** * 跨域提交公用方法 * @param param 参数 * @param url 跨域的地址 * @param callFun 回调函数 callFun(data) */ function ...

  2. ajax跨域问题解决方案

    今天来记录一下关于ajax跨域的一些问题.以备不时之需. 跨域 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面 ...

  3. Ajax跨域访问wcf服务中所遇到的问题总结。

    工具说明:vs2012,sql server 2008R2 1.首先,通过vs2012建立一个wcf服务项目,建立好之后.再新开一个vs2012 建立web项目,通过jQuery的ajax方法访问服务 ...

  4. php中ajax跨域请求---小记

    php中ajax跨域请求---小记   前端时间,遇到的一个问题,情况大约是这样: 原来的写法: 前端js文件中: $.ajax({ type:'get', url:'http://wan.xxx.c ...

  5. 总结Ajax跨域调用问题

    原文:http://blog.csdn.net/wangxiaohu__/article/details/7294842 (一):动态脚本注入的方法.即在页面中动态生成<script>脚本 ...

  6. ajax跨域请求的解决方案

    一直打算改造一下自己传统做网站的形式. 我是.Net程序员,含辛茹苦数年也没混出个什么名堂. 最近微信比较火, 由于现在大环境的影响和以前工作的总结和经验,我打算自己写一个数据,UI松耦合的比较新潮的 ...

  7. WebApi 自定义过滤器实现支持AJAX跨域的请求

    我想关于此类话题的文章,大家一搜铺天盖地都是,我写此文的目的,只是对自己学习过程的记录,能对需要的朋友有所帮助,也百感荣幸!!!废话不多说,直接上代码! 客户端:很简单的AJAX请求 <html ...

  8. 有关Ajax跨域请求的解决方案

    前言 最近博主在赶项目进度.所以微信二次开发那边的博文一直没有更新.后续时间会慢慢记录这个学习历程的.来年公司要开发微信小程序.到时也会记录一下历程. 闲话少说,今天在工作中遇到了SpringMVC接 ...

  9. AJAX跨域完全讲解

    AJAX跨域完全讲解 今天在慕课网上学习了AJAX跨域完全讲解:https://www.imooc.com/learn/947 我在收集AJAX面试题的时候其实就已经有过AJAX跨域的问题的了,当时候 ...

随机推荐

  1. linux命令学习笔记（10）：cat 命令

    cat命令的用途是连接文件或标准输入并打印.这个命令常用来显示文件内容,或者将几个文件连接起来显示, 或者从标准输入读取内容并显示,它常与重定向符号配合使用. ．命令格式: cat [选项] [文件] ...

  2. 优秀开源项目之二：流媒体直播系统Open Broadcaster Software

    Open Broadcaster Software(OBS)是一款用于音视频录制和直播的免费开源软件.可以轻松部署到多种平台,目前支持Windows.MAC和Linux. 特性: 1.高性能的实时视频 ...

  3. Agc017_E Jigsaw

    传送门 题目大意 有$n$块拼图,每一块都由左中右三个部分组成,每块拼图中间部分是高为$H$的长方形,对于第$i$块品推左侧是高为$A_i$距离底部为$C_i$的长方体,右侧是高位$B_i$距底部为$ ...

  4. 表达式(exp)

    题目大意 给定一个逻辑表达式,求每一个数满足$\in[1,n]$的使的表达式为真的方案数. 题解 题目限制较奇怪且数据范围较小,所以可以考虑直接暴力. 考虑枚举每一个变量一共出现了$k$种数值,再枚举 ...

  5. CentOS 6.X 安装 EPEL 源

    CentOS 6.X 自带的软件源可选的并不多,有时候要找到一个偏门一些的软件,用命令一搜怎么都没有源,考虑到使用软件源配合 yum 命令安装可以自动安装依赖,所以加一个新的软件源迫在眉睫. 考虑到同 ...

  6. Redis IRedisTypedClient

    IRedisTypedClient IRedisTypedClient类相当于IRedicClient的强类型版,其方法与属性大多数与IRedisClient类似. 它支持在Redis中使用Linq查 ...

  7. JavaScript高级程序设计学习笔记第十五章--使用Canvas绘图

    一.基本用法 1.要使用<canvas>元素,必须先设置其 width 和 height 属性,指定可以绘图的区域大小.能通过 CSS 为该元素添加样式,如果不添加任何样式或者不绘制任何图 ...

  8. 【254】◀▶IEW-Unit19

    Unit 19 Technology Communication I.名词性从句在雅思写作中的运用 英语中哪些位置可以放名词? 1)主语 2)宾语 3)表语 4)同位语 名词的位置放一个句子=名词性从 ...

  9. Spring示例工程

    ---------------siwuxie095                                 创建一个基于 Spring IoC 的小程序的步骤:     建立 Spring 工 ...

  10. how to download a file with Nodejs(without using third-party libraries)用node下载文件

    创建HTTP GET请求并将其管理response到可写文件流中: var http = require('http'); var fs = require('fs'); var file = fs. ...