同源策略

同源策略限制了一个源（origin）中加载文本或脚本与来自其它源（origin）中资源的交互方式。如果两个页面拥有相同的 协议（protocol），端口（如果指定），和 主机，那么这两个页面就属于同一个源（origin）。

在使用XMLHttpRequest时会受到同源策略的约束。

浏览器发送的请求header中包含一个Origin，而服务器返回给浏览器的响应header中包含一个Access-Control-Allow-Origin，因此：

• 可以通过设置Access-Control-Allow-Origin:来允许跨域请求，origin的值可以设置为｀*｀，表示接受来自任何站点的跨域请求，也可以设置为特定的域，表示只有这个域能跨域请求到服务器上的数据。

• 使用cors(Cross-Origin Resource Sharing)可以实现跨域访问，但cors只支持现代浏览器。

jsonp

jsonp（json with padding），一种包含在函数调用中的json。解决跨域请求比较可靠的一种思路是：设置dataType为jsonp。

普通的json格式：

{'name': 'insekkei'}

jsonp格式：

callback(
    {'name': 'insekkei'}
);

即：调用jsonp回调函数callback，并将返回的json作为参数传入这个回调函数。callback是jsonp请求默认的回调函数名称，会在请求url中追加?callback=?，也可以自定义这个名称：

dataType : 'jsonp',
jsonp: 'callbackName'

这时服务器需要返回的数据格式为：

callbackName(
    {'name': 'insekkei'}
);

显而易见，jsonp不仅需要客户端js进行配置，也需要服务器端返回数据格式的配合。不过，jsonp只支持get请求...。

superagent

react中需要ajax请求时，可以使用superagent这个模块，例如一个get请求：

var request = require('superagent');

request
    .get(url)
    .set('Accept', 'application/json')
    .query(paramObj)
    .end(function(res){
        // do something
    });

post方法：

request
    .post(url)
    .send(dataObj)
    ...

然而有时候需要跨域请求数据，如果只是使用上面的方法，控制台会出现类似如下提示：

XMLHttpRequest cannot load http://xxx.xx.... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://yyy.yy...' is therefore not allowed access.

superagent-jsonp

superagent-jsonp为superagent添加了jsonp方法。

安装：

npm i superagent-jsonp --save

使用：

var request = require('superagent');
var superagent = require('superagent');
require('superagent-jsonp')(request);

request
    .get(url)
    .jsonp()
    .end(function(){
        // do something...
    });