因为项目需要，目前需要通过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({//需要跨域的urlurl:"****",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方式，仅需要在后端配置，前端照常访问即可，方式还是比较简单的。

react中 ajax跨域请求相关推荐

java中ajax跨域请求
最近在项目中要使用到跨域请求验证码然后再提交的问题.由于验证码是存在session里的,而跨域请求在后台获得的session每次都不一样,导致验证码无法比对.网上查找的方法都比较含糊,最后解决了决定写 ...
jQuery中ajax跨域请求
背景介绍: 现在做的课题要实现在一个没有部署在服务器上的网页中,使用ajax来加载已经部署在服务器上的一个服务提供的数据. 先看静态页面的代码: <html><head>&l ...
ajax跨域请求，请求成功但是走error
js中ajax跨域请求其他接口,get请求方式,请求成功但是还是走error. 处理如下,使用下面的方式请求 dataType: "jsonp", jsonp:'callback ...
jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
jq中ajax请求跨域,用JQuery实现简单的Ajax跨域请求
前一阵发过一篇利用ExtJs的ScriptTagProxy实现Ajax跨域请求的文章,这几天看了一下Jquery,发现如果用JQuery中的getScript其实更简单(jquery 1.2.6版本) ...
ajax请求时cookie,ajax跨域请求中的cookie问题
update 另一个问题 ajax在进行复杂请求如PUT,POST,DELETE等时,当请求为cross domain request是,会先发一个OPTIONS请求确认服务器的跨域支持情况,在发送原 ...
ajax跨域请求 html5,HTML5中使用postMessage实现Ajax跨域请求的方法
由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等. 常规的几种解决方法: (1) document.domain+iframe: (2) 动态创建 ...
js请求结果拦截机器_js利用jquery的jsonp来解决ajax跨域请求被浏览器拦截结果的问题...
先来个表.页面太多对不起我也不知道这张表是从哪个博客保存过来的,所以无法注明博客地址.非常抱歉.URL说明是否允许通信 http://www.a.com/a.jshttp://www.a.com/b. ...
JSONP实现Ajax跨域请求
前言由于浏览器存在同源策略的机制,所谓同源策略就是阻止从一个源(域名,包括同一个根域名下的不同二级域名)加载的文档或者脚本获取/或者设置另一个源加载的文档属性. 但比较特别的是:由于同源策略是浏览器 ...

react中 ajax跨域请求