例子

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

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

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="UTF-8" />

     <script src="../build/react.development.js"></script>

     <script src="../build/react-dom.development.js"></script>

     <script src="../build/babel.min.js"></script>

     <script src="../build/jquery.min.js"></script>

   </head>

   <body>

     <div id="example"></div>

     <script type="text/babel">

       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 <span>Loading...</span>;

           }

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

             return <span>Error: {this.state.error.message}</span>;

           }

           else {

             var repos = this.state.data.items;

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

               return (

                 <li key={index}><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li>

               );

             });

             return (

               <main>

                 <h1>Most Popular JavaScript Projects in Github</h1>

                 <ol>{repoList}</ol>

               </main>

             );

           }

         }

       }

       ReactDOM.render(

         <RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,

         document.getElementById('example')

       );

     </script>

   </body>

 </html>

显示内容：

ajax跨域访问限制放开

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

跨域资源共享

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

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

  1. 对于客户端，我们还是正常使用xhr对象发送ajax请求。
    唯一需要注意的是，我们需要设置我们的xhr属性withCredentials为true，不然的话，cookie是带不过去的哦，设置： xhr.withCredentials = true;
  2. 对于服务器端，需要在 response header中设置如下两个字段:
    Access-Control-Allow-Origin: http://www.yourhost.com
    Access-Control-Allow-Credentials:true
    这样，我们就可以跨域请求接口了。

抓包分析

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

ajax跨域例子的更多相关文章

  1. Ajax操作如何实现跨域请求 （JSONP和CORS实现Ajax跨域的原理）

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

  2. 解决ajax跨域请求 （总结）

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

  3. JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

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

  4. Ajax跨域：Jsonp原理解析

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

  5. AJAX跨域解决方案

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

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

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

  7. AJax 跨域问题

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

  8. jQuery ajax跨域请求的解决方法

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

  9. ajax跨域提交

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

随机推荐

  1. win2008server R2 x64 部署.net core到IIS--ASP .NET Core HTTP Error 502.5 – Process Failure

    服务器win2008server R2 x64 部署.net core到IIS 解决ASP .NET Core HTTP Error 502.5 – Process Failure 问题等 1.发布网 ...

  2. 一条命令解决： sql server 2008 安装提示重启计算机

    0.将安装的iso文件解压 1. 使用管理员账户打开 cmd命令行 2.将命令行的路径切换到解压路径下,你应该可以看到setup.exe 3.执行命令  一条命令解决:setup.exe /SkipR ...

  3. Rabbitmq集群高可用

    转载:https://www.cnblogs.com/flat_peach/archive/2013/04/07/3004008.html RabbitMQ是用erlang开发的,集群非常方便,因为e ...

  4. centos7的内核区别

    最近重新搭建环境准备测试一些东西,在网上随意下载了一个镜像,名字叫做:CentOS-7-i386-Everything-1810 下载完之后开始做实验安装软件的时候发现一直报错:[Errno 14] ...

  5. sys系统模块

    import sys # print(0)## sys.exit(0)## print(123) # print(sys.version)# print(sys.maxsize)# print(sys ...

  6. 【转】手把手教你读取Android版微信和手Q的聊天记录(仅作技术研究学习)

    1.引言 特别说明:本文内容仅用于即时通讯技术研究和学习之用,请勿用于非法用途.如本文内容有不妥之处,请联系JackJiang进行处理!   我司有关部门为了获取黑产群的动态,有同事潜伏在大量的黑产群 ...

  7. python小白——进阶之路——day2天-———数据类型和Number类型和str字符串

    ### -python的六大标准数据类型(1)Number 数字类型(int float bool complex)(2)String 字符串类型(3)List 列表类型(4)Tuple 元组类型(5 ...

  8. 初识gauge自动化测试框架

    segmentfault阅读 官方网站:https://docs.gauge.org/latest/index.html 介绍: Gauge是一个轻量级的跨平台测试自动化工具,可以使用不同的语言中编写 ...

  9. Python--day10（函数（使用、分类、返回值））

    1.  函数 1.  函数: 完成特定功能的代码块,作为一个整体,对其进行特定的命名,该名字就代表这函数 现实中:很多问题要通过一些工具进行处理 => 可以将工具提前生产出来并命名 =>通 ...

  10. Python--day09（内存管理、垃圾回收机制）

    昨天内容回顾 1.  操作文件的三个步骤: 1.  打开文件:硬盘的空间被操作系统持有,文件对象被用用程序持续 2.  操作文件:读写操作 3.  释放文件:释放操作系统对硬盘空间的持有 2.  基础 ...