AJAX跨域问题总结
跨域是什么?
首先说下同源,同源策略是浏览器的一种安全策略,所谓同源是指,域名,协议,端口完全相同。而跨域就是不同源 !
能够进行跨域的请求
一般a,img,link[rel=stylesheet],video,audio,等等能够发出请求的标签都可以实现跨域访问。但是这些标签不能得到返回的东西,所以一般不会用他们来请求资源。
常见的跨域处理方案:
由于ajax先天设计的时候,不能实现跨域访问。所以就出现了处理跨域这样的问题。
① jsonp来处理跨域,下面用jQuery来实现,关键代码如下:
$.ajax({
type : "GET",
url : "http://www.a.com/index.php?message=msg&callback=?",
dataType : "jsonp",
jsonp: 'callback',
success : function(json){
console.log(json.msg);
}
});
② 服务端设置 Access-Control-Allow-Origin
我们使用nodejs来完成这一问题。服务端代码如下:
"use strict"
const http = require('http');
const server = http.createServer();
server.on('request',(req,res)=>{
res.writeHead(200,{"Content-Type":"text/plain","Access-Control-Allow-Origin":"*"});
res.write('ajax cross domain');
res.end();
})
server.listen(3000,(err)=>{
if(err){
return console.log(err.message);
}
console.log('server is on');
})
浏览器端代码如下:
window.onload = function(){
var xhr = new XMLHttpRequest();
xhr.open("post","http://localhost:3000/");
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
console.log(xhr.responseText);
}
}
}
xhr.send(null);
}
使用http的形式访问客户端网页,那么就会输出不同源下返回的数据。
③ 其他跨域策略 iframe, window.postMessage()等
详见: http://rickgray.me/2015/09/03/solutions-to-cross-domain-in-browser.html
④ 使用豆瓣的api,简单封装一个跨域请求函数:
<script>
/* 封装数据 跨域url params fn */
function crossDomain(url,params,fn){
var head = document.getElementsByTagName('head')[0];
// 1. 处理回调函数
var cbName = 'jsonp'+ (Math.random() * Math.random()).toString().substr(2) + new Date().getTime();
/* 将回调函数挂载到window对象上 */
window[cbName] = function(data){
// 拿到并处理数据
fn(data);
// 拿到数据后remove掉
//head.removeChild(scriptObj);
}
// 2. 解析url
var qstring = '';
for(var key in params){
qstring += key + '=' + params['key'] + '&';
}
qstring += 'callback=' + cbName;
url += '?' + qstring;
// 3. 插入script
var scriptObj = document.createElement('script');
scriptObj.src = url;
head.appendChild(scriptObj);
}
</script>
<script>
/* 使用 */
crossDomain('http://api.douban.com/v2/movie/in_theaters',{},function(data){
console.log(data);
})
</script>
AJAX跨域问题总结的更多相关文章
- Laravel中的ajax跨域请求
最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...
- Ajax操作如何实现跨域请求 (JSONP和CORS实现Ajax跨域的原理)
由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...
- Ajax跨域问题的两种解决方法
浏览器不允许Ajax跨站请求,所以存在Ajax跨域问题,目前主要有两种办法解决. 1.在请求页面上使用Access-Control-Allow-Origin标头. 使用如下标头可以接受全部网站请求: ...
- 浅谈linux 下,利用Nginx服务器代理实现ajax跨域请求。
ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...
- 解决ajax跨域请求 (总结)
ajax跨域请求,目前已用几种方法实现: 1)用原生js的xhr对象实现. var url="http://freegeoip.net/json/" ...
- Ajax跨域访问wcf服务中所遇到的问题总结。
工具说明:vs2012,sql server 2008R2 1.首先,通过vs2012建立一个wcf服务项目,建立好之后.再新开一个vs2012 建立web项目,通过jQuery的ajax方法访问服务 ...
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- Ajax跨域:Jsonp原理解析
推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...
- jquery ajax跨域调用
客户端: //ajax跨域调用的方法 $.ajax({ url:dustUrl+"/screenshot/getDevices.do", type: "get" ...
- 浅析JSONP-解决Ajax跨域访问问题
浅析JSONP-解决Ajax跨域访问问题 很久没有写随笔了,总是感觉没时间,其实时间就是...废话少说,前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现 ...
随机推荐
- 如何用JavaScript制作循环图形
[图题思路] 1.确定图形一共几行,即为外层的循环的次数 2.确定每行有几种元素,代表有几个内层循环 3.确定每种元素的个数,即为每个内层循环的次数Tips:通常,找出每种元 ...
- 【模板小程序】求M~N范围内的质数个数
/* 本程序说明: [编程题] 求素数 时间限制:2秒 空间限制:32768K 输入M.N,1 < M < N < 1000000,求区间[M,N]内的所有素数的个数.素数定义:除了 ...
- OpenSSL 中DES-ECB 加密使用注意事项
参考:http://blog.csdn.net/cparent/article/details/40652051DES加密算法作为一个过时的东西,使用的项目已经很少了.最近在调试与服务器端进行DES加 ...
- ThinkPHP的基本操作
一.生成入口文件 1.打开服务器,在本地环境测试时在地址栏输入localhost/项目文件名/index.php 可以在Application下面生成一个home模块,记得在这之前,要建立一个项目文 ...
- ubuntu 双网卡建网桥脚本实现
#!/bin/bash interface1=`ls /sys/class/net|grep en|awk 'NR==1{print}'` interface2=`ls /sys/class/net| ...
- mysql之mysql_config_editor
本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuirong.cn mysql_config_editor允许你把登录的身份验证信息存储 ...
- hibhibernate中hql中的语句where语句查询List出现空
1.java.sql.Date 与 java.util.Date java.sql.Date是从java.util.Date中继承而来 假设 dates1(java.sql.Date)要赋值给date ...
- SpringBoot简单连接数据库以及查询数据
实现大概思路:配置数据库环境-->实体类-->新建**Repostory接口并且继承JpaRepository-->配置URL映射以及请求方式- 首先,在数据库中新建名称为dbgir ...
- Java中的return关键字
Java常见面试题之一: try {}里有一个return语句,那么紧跟在这个try后的finally {}里的code会不会被执行,什么时候被执行,在return前还是后? 请看下面程序就可以解释 ...
- 关于Spring事务的原理,以及在事务内开启线程,连接池耗尽问题.
主要以结果为导向解释Spring 事务原理,连接池的消耗,以及事务内开启事务线程要注意的问题. Spring 事务原理这里不多说,网上一搜一大堆,也就是基于AOP配合ThreadLocal实现. 这里 ...