前端跨域

javascript

前端跨域请求当前属于属于常规操作（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.。