前端跨域
前端跨域请求当前属于属于常规操作(AJAX)
- json-padding(纯前端跨域)
浏览器同源策略,正常情况下,会导致XHR无法跨域。
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script>
script
标签可以跨域加载js脚本。。script
标签加载的脚本文件会立刻执行。
本地脚本预先定义一个callback(data)
函数,然后向支持jsonp的服务发起一个请求,服务器一般会返回callback(data)
的形式,这样就变相获得并操纵数据。
一般形式<scripts src="http://www.*.com?callback=callback"></script>
- CORF
CORF是跨站资源共享的简称,具体细节过多,详情可以参考
http://www.html5rocks.com/en/tutorials/cors/
https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS
如果只是简单的获取局部数据的话,操作并不难,下面是Express的一个简单实现(REST API端)
app.all('*',function(req,res,next){
res.set({
'Access-Control-Allow-origin' : '*',
'Access-Control-Allow-Headers' : 'X-Requested-With',
'Access-Control-Allow-Methods' : 'GET'
}) ;
next();
});
我用的http://127.0.0.1:1337作为静态文件服务器,从http://127.0.0.1:1336 REST API获取数据。
var xhr = new XMLHttpRequest();
xhr.open('GET','http://127.0.0.1:1336/blog',true);
xhr.addEventListener('load',function(e){
console.log(this.response);
})
xhr.send();
Access-Control-Allow-origin
属于必填项,*
属于通配符,如果没有,就会报错XMLHttpRequest cannot load http://127.0.0.1:1336/blog. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:1337' is therefore not allowed access.
。