例子

https://github.com/ruanyf/react-demos/blob/master/demo12/index.html

此网页代码运行在本地， 是可以访问 github 数据的。 是由于 github 网站开启的 ajax 跨域访问能力。

class RepoList extends React.Component {

constructor(props) {

super(props)

this.state = {

loading: true,

error: null,

data: null

};

}

componentDidMount() {

this.props.promise.then(

value => this.setState({loading: false, data: value}),

error => this.setState({loading: false, error: error}));

}

render() {

if (this.state.loading) {

return Loading...;

}

else if (this.state.error !== null) {

return Error: {this.state.error.message};

}

else {

var repos = this.state.data.items;

var repoList = repos.map(function (repo, index) {

return (

{repo.name} ({repo.stargazers_count} stars)
{repo.description}

);

});

return (

Most Popular JavaScript Projects in Github

1. {repoList}

);

}

}

}

ReactDOM.render(

,

document.getElementById('example')

);

显示内容：

ajax跨域访问限制放开

https://www.zhihu.com/question/26376773

跨域资源共享

CORS是一个W3C标准，全称是”跨域资源共享”(Cross-origin resource sharing)。 对于这个方式，阮一峰老师总结的文章特别好，希望深入了解的可以看一下http://www.ruanyifeng.com/blog/2016/04/cors.html。

这里我就简单的说一说大体流程。

对于客户端，我们还是正常使用xhr对象发送ajax请求。

唯一需要注意的是，我们需要设置我们的xhr属性withCredentials为true，不然的话，cookie是带不过去的哦，设置： xhr.withCredentials = true;

对于服务器端，需要在 response header中设置如下两个字段:

Access-Control-Allow-Origin: http://www.yourhost.com

Access-Control-Allow-Credentials:true

这样，我们就可以跨域请求接口了。

抓包分析

对于发起的ajax请求，存在响应头  Access-Control-Allow-Origin：*

Ajax操作如何实现跨域请求 (JSONP和CORS实现Ajax跨域的原理)

由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...

解决ajax跨域请求 (总结)

ajax跨域请求,目前已用几种方法实现:   1)用原生js的xhr对象实现.                var url="http://freegeoip.net/json/&quot ...

JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

Ajax跨域：Jsonp原理解析

推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...

AJAX跨域解决方案

从AJAX诞生那天起,XMLHttprequest对象不能跨域请求的问题就一直存在,这似乎是一个很经典的问题了,是由于javascript的同源策略所导致. 解决的办法,大概有如下几种: 1. 使用中 ...

浅析Ajax跨域原理及JQuery中的实现分析

AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请求数据,就会出现错误.如果能控制数据驻留的远程服务器 ...

AJax 跨域问题

从AJAX诞生那天起,XMLHttprequest对象不能跨域请求的问题就一直存在.这似乎是一个很经典的问题了.是由于javascript的同源策略(这里不作深入探讨)所导致. 解决的办法,大概有如下 ...

jQuery ajax跨域请求的解决方法

在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...

ajax跨域提交

ajax跨域提交     如果在两个网站之间进行异步互动想要通过ajax时不可能的,因为header不支持xmlhttprequest这种方式的跨域提交. 但是jquery的ajax同时还提供了jso ...

随机推荐

Vertica 业务用户指定资源池加载数据

之前在"Vertica 安装,建库,新建测试用户并授予权限,建表,入库"这篇文章也简单介绍过入库部分的内容. 但之前测试用例若用于生产环境有明显的局限性: 1.是用dbadmin管 ...

php : 常用函数

常用函数: <?php /** * 获取客户端IP * @return [string] [description] */ function getClientIp() { $ip = NULL ...

第20&sol;24周 死锁(Deadlocking)

大家好,欢迎回到性能调优培训.今天讨论SQL Server里的死锁(Deadlocking),第5个月的培训就结束了.当2个查询彼此等待,没有查询可以继续它的工作就会发生死锁.第一步我会概括介绍下SQ ...

【代码笔记】iOS-淡出淡入效果

一,效果图. 二,工程图. 三,代码. ViewController.h #import @interface ViewController : UIVie ...

JavaScript 中的window&period;event代表的是事件的状态&comma;jquery事件对象属性&comma;jquery中如何使用event&period;target

http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...

Hbase之原子性更新数据

import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; impo ...

android系统体系结构

android系统底层是建立在Linux系统之上的,如下图 从上图可以看出android系统有五部分组成 1.APPLICATIONS(应用程序层) 包含一些核心应用程序,电子邮件,日历,地图,浏览器 ...

UV印刷

UV就是在一张印上你想要的图案上面过上一层油,主要是增加产品亮度,保护产品表面,其硬度高,耐腐蚀摩擦,不易出现划痕等,有些复膜产品现改为上UV,能达到环保要求,但UV产品不易粘接,有些只能通过局部UV ...

成为一名Java架构师的必修课

一.热门框架源码学习 设计模式篇 Spring5源码解读篇 Mybatis篇 SpringBoot2篇 二. 微服务架构 架构设计篇 BAT互联网架构这些年的演进分析 国内外常见分布式系统架构状况介绍 ...

DAY24、面向对象

一.复习继承1.父类:在类后()中写父类们2.属性查找顺序:自己->()左侧的父类->依次往右类推3.抽离:先定义子类,由子类的共性抽离出父类 派生:父类已经创建,通过父类再去派生子类4. ...