非跨域问题报错 -rpccorsdomain=""

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的基本思想是，网页通过添加一个

最后还是采用的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方式，仅需要在后端配置，前端照常访问即可，方式还是比较简单的。