React跨域问题解决

https://segmentfault.com/q/1010000012732581

非跨域问题报错 -rpccorsdomain="http://localhost:3000"

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的基本思想是，网页通过添加一个元素，向服务器请求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方式，仅需要在后端配置，前端照常访问即可，方式还是比较简单的。