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>
时间: 2024-10-22 02:54:21

AJAX跨域问题总结的相关文章

jquery ajax跨域的完美解决方法(jsonp方式)

ajax跨域请求的问题,JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式,接下来为大家详细介绍下客户端JQuery.ajax的调用代码 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquer

Ajax跨域与解决方案

1.同步交互与异步交互 同步交互:用户在URL地址输入http://www.baidu.com,服务器接收请求并进行相应处理,此时用户无法操作,只能等待,只有当返回数据到客户端的时候,用户才能继续操作异步交互:用户操作某个页面,请求某个数据,客户可以继续操作(服务器返回数据),不涉及到整个页面的刷新 2.XmlHttp XmlHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API.XmlHttp最大的用处是可

AJAX跨域

AJAX跨域AJAX不允许跨域访问. 跨域是指浏览器B显示的是服务器S1的数据,全是从S1取得的数据则是同域:但如果B显示的S1上的数据的某个比如img是从S2上取得的数据,则是跨域.端口不一样也是跨域.跨域不仅是跨服务器,还是跨IP,跨端口. AJAX通过三种方法,可以解决跨域问题. 1.设置请求头,每一个路径里都要设置,可以封装成方法方便调用.       res.setHeader("Access-Control-Allow-Origin","*");   

JQuery的Ajax跨域请求的

JQuery的Ajax跨域请求的(Ajax) 什么是jsonp格式呢?API原文:假设获取的数据文件存放在远程server上(域名不同.也就是跨域获取数据),则须要使用jsonp类型.使用这样的类型的话,会创建一个查询字符串參数 callback=? .这个參数会加在请求的URL后面. server端应当在JSON数据前加上回调函数名.以便完毕一个有效的JSONP请求.意思就是远程服务端须要对返回的数据做下处理,依据client提交的callback的參数,返回一个callback(json)的

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

工具说明:vs2012,sql server 2008R2 1.首先,通过vs2012建立一个wcf服务项目,建立好之后.再新开一个vs2012 建立web项目,通过jQuery的ajax方法访问服务. 问题:由于web项目和wcf服务,不在同一个端口之中,所以涉及到“跨域”的问题.跨域访问的时候,需要对服务的接口和方法做一定的限定.具体参考:http://www.cnblogs.com/yangbingqi/p/2096197.html 2.解决了跨域问题,我们需要把服务部署到IIS.vs20

AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法?

ajax是异步的 JavaScript 和 XML.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 交互流程: 1--启动  获取XMlHttpRequest对象             2--open 打开url通道,并设置异步传输              3--send 发送数据到服务器             4--服务器接受数据并处理,处理完成后返回结果              5--客户端接收

解决Ajax跨域问题:Origin xx is not allowed by Access-Control-Allow-Origin.

解决Ajax跨域问题:Origin xx is not allowed by Access-Control-Allow-Origin. 今天一个Ajax跨域问题,纠结我半天,记录之. <html> <head> <title>title</title> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script>

Ajax 跨域请求 jsonp获取json数据

遇到Ajax的跨域请求出问题 找了中解决办法如下: 参考内容:http://justcoding.iteye.com/blog/1366102 由于受到浏览器的限制,该方法不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数 据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器上,Web 应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办? 理解同源策略 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的

ajax跨域问题

提到ajax 大家比较头疼的是跨域问题,在项目中大多说都是以json格式来存储数据的,所以说我们今天就简单说一下利用jsonp形式来解决跨域问题,大家都知道只要带有src的标签都可以跨域请求,如img.script... 所以说解决ajax 跨域问题的关键是src标签,我们可以用script src 标签,然后再来个回调函数的方法解决跨域. 假如我们远程服务器有个alert.js,然后里面有alert("跨域成功"); 然后我们在有index.html, <!DOCTYPE ht

关于ajax跨域

众所周知,ajax是不允许跨域访问的,但是有的时候我们又需要用到ajax跨域. 其实ajax跨域区分是很严格的,例如同一个服务器,就算端口不一样这也算是跨域. 解决ajax跨域有三个方法: 1.设置响应头.设置在允许跨域的服务器.setHeader  每一个代码都需要设置. 2.设置代理.通过代理实现跨域. 3.JSONP   JSON with padding   用script包裹 只能用get方法提交,不是真正的ajax方法.通过创建script方法跨域,返回一段可以执行的JS代码. /*