react中 ajax跨域请求

因为项目需要，目前需要通过react ajax请求，实现请求其它域的登录URL，将用户写入到其它域的cookie中，之后herf连接该网址的其他内容的时候，便可直接跳转到对应内容，无需跳转到登录页面。

1、cors和jsonp

何为跨域，及当一个请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。在做跨域请求的时候，cors和jsonp我都尝试过了。

1.1cors

cors（Cross-Origin Resource Sharing 跨源资源共享）。简单请求时，浏览器会直接发送跨域请求，并在请求头中携带Origin 的header，表明这是一个跨域的请求。服务器端接到请求后，会根据自己的跨域规则，通过Access-Control-Allow-Origin和Access-Control-Allow-Methods响应头，来返回验证结果。如果验证成功，则会直接返回访问的资源内容。

1.2jsonp

jsonp（Json with Padding 填充式JSON或参数式JSON），JSONP的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
举一个案例来说明。
假设客户期望返回JSON数据：["customername1","customername2"]。
如客户想访问 : http://localhost:3000?jsonp=callbackfunction。
真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。

最后还是采用的cors实现了，jsonp虽然请求成功了，但是针对callback函数，我这边还没有解决。

2、cors在后端的配置

2.1 nodejs的配置

//该代码所放置的位置需要靠前，如果后端有redirect跳转链接，则需要将此代码放置在redirect前
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*" );//若需要加入withCredentials,则需要将*改为具体域名
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

2.2 php的配置

 <?php header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
//主要为跨域CORS配置的两大基本信息,Origin和headers

3、react 前端请求

前端若采用ajax请求，get或者post数据，按照正常的方式即可。

 $.ajax({
          //需要跨域的url
            url:"****",
            method: "POST",
            crossDomain:true,
            xhrFields:{withCredentials:true},
            beforeSend:function(xhr){
                xhr.withCredentials=true;
            },
            success: function (data) {
                 console.log(data);
              }.bind(this),
            error: function (xhr, status, err) {
                 console.log(err);
              }.bind(this)
          }); 

4、结束语

利用cors跨域，既可以实现post也可以实现get，若利用jsonp实现跨域，仅可实现get方式的跨域访问。而且cors方式，仅需要在后端配置，前端照常访问即可，方式还是比较简单的。