关键字：跨域访问，cross-origin, NodeJS, REST API, JavaScript， Access-Control-Allow-Origin

1.新建并运行一个 NodeJS的server，端口为：3000。暴露一个API， URL为http://localhost:3000/users/。以下为该API的实现：

users.js

var express = require('express');

var router = express.Router();

/* GET users listing. */

router.get('/', function(req, res) {

  res.send('respond with a resource');

});

module.exports = router;

2.将以下代码保存的一个html文件

users.html

<html>

<head></head>

<body>

<script type="text/javascript">

var request = new XMLHttpRequest();

var url = "http://localhost:3000/users";

request.open('GET', url, true);

request.onreadystatechange = handler;

request.send(); 

function handler(evtXHR)

{

    if (request.readyState == 4)

    {

        if (request.status == 200)

        {

            var response = request.response;

            alert(response);

        }

        else

            alert("Request Errors Occured");

    }

}

</script>

</body>

</html>

3.用Chrome打开users.html, 打开Chrome的JavaScript的控制台，看到以下错误：XMLHttpRequest cannot load http://localhost:3000/users. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

4.将REST API的实现改为如下：

var express = require('express');

var router = express.Router();

/* GET users listing. */

router.get('/', function(req, res) {

  res.setHeader('Access-Control-Allow-Origin', '*');

  res.send('respond with a resource');

});

module.exports = router;

注：把Access-Control-Allow-Origin设置为‘*’，表示任意origin可以访问该API. 在实际应用中这样是不安全的，需要指定具体的origin。

5.再次运行users.html，以上问题解决，得到消息“respond with a resource”。

参考资料：http://www.w3.org/TR/2013/CR-cors-20130129/

REST API之前端跨域访问的更多相关文章

  1. 解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题

    问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, ...

  2. nodejs前端跨域访问

    XMLHttpRequest cannot load http://localhost:3000/. No 'Access-Control-Allow-Origin' header is presen ...

  3. beego api 服务允许跨域访问，解决前端访问报Access-Control-Allow-Origin问题

    背景: golang做了个简单服务,前端get请求拿数据,报错:No 'Access-Control-Allow-Origin' header is present on the requested ...

  4. web api中允许跨域访问

    ①添加owin的引用 ②添加owin.Cors的引用 ③在WebApiConfig中添加 config.EnableCors(new EnableCorsAttribute("*" ...

  5. 支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示

    随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Angularjs的框架来做UI,而数据则由另一个Web Api 的网站项目来支撑.注意,这里是 ...

  6. 在dotnet core web api中支持CORS（跨域访问）

    最近在写的Office add-in开发系列中,其中有一个比较共性的问题就是在add-in的客户端脚本中访问远程服务时,要特别注意跨域访问的问题. 关于CORS的一些基本知识,请参考维基百科的说明:h ...

  7. Flask设置Access-Control_Allow_Origin实现跨域访问

    前端访问Flask的接口,浏览器报错:has been blocked by CORS policy: No 'Access-Control-Allow-Origin' heade 需要将Flask的 ...

  8. 如何让你的 Asp.Net Web Api 接口，拥抱支持跨域访问。

    由于 web api 项目通常是被做成了一个独立站点,来提供数据,在做web api 项目的时候,不免前端会遇到跨域访问接口的问题. 刚开始没做任何处理,用jsonp的方式调用 web api 接口, ...

  9. Web Api 2(Cors)Ajax跨域访问

    支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示   随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Ang ...

随机推荐

  1. [转载](iPhone开发)Bundle Display Name 改为中文。ap

    原文地址:(iPhone开发)Bundle Display Name 改为中文.app显示为中文作者:小新 要先在info的Localizations加入Chinese(zh-Hant) 再進到inf ...

  2. JAVA编程心得-多态设计初步

    面向对象的思想中,封装,继承,多态作为特性会在开发中广泛应用,一个健壮的系统除了功能强大以外,它的可扩展性应该也很强,多态恰好应用了这个思路. 下面我以杨小聪去某地的方式为例,我们知道首先杨小聪要去某 ...

  3. 【转】GitHub平台最火Android开源项目整理——2013-08-25 17

    http://game.dapps.net/news/developer/9199.html GitHub在中国的火爆程度无需多言,越来越多的开源项目迁移到GitHub平台上.更何况,基于不要重复造轮 ...

  4. svn各种问题总结

    1.out of date 就是说别人已经更新到服务器了,而我修改的还不是服务器最新的. 直接Replace with  资源库的最新内容

  5. Oracle 流式制造功能培训

    转自百度文库: http://wenku.baidu.com/link?url=dRyll_P7C3fepoUp5dggYVzw6lVmifwEJMLvis1CN58m09WYF1unY3Ddn9Lq ...

  6. 友元（friend）--初学篇

    友元:友好的元子,,,,呵呵呵 一般一个类中有私有(private),公有(public),和保护(protected)三种类型成员,而只有public成员才可以在类外被随便访问,protected只 ...

  7. LaTeX 标题中使用 \bm 命令与 hyperref 的冲突

    问题 当使用 hyperref 宏包时,在标题中使用 \bm 为数学符号加粗会出现错误 \documentclass{article} \usepackage{bm} \usepackage{hype ...

  8. C# Callback 回调实用讲解 [原创]

    这个是2011年写的一个技术贴,现在看可能有点过时了,有兴趣的朋友也可以看一下. 一. 描述 在开发winform程序时不会考虑页面刷新问题,只要控制好线程别导致假死就ok了,但是在开发web页面程序 ...

  9. 【转】数据库SQL优化大总结之 百万级数据库优化方案

    原帖地址:http://www.cnblogs.com/yunfeifei/p/3850440.html#undefined 1.对查询进行优化,要尽量避免全表扫描,首先应考虑在 where 及 or ...

  10. 实现View弹性滑动例子

    弹性滑动原理 将一次大的滑动非为若干次小的滑动,并在一个时间段内完成.有一种顺畅的感觉更-好的用户体验 实现方式很多种,包括用Scroller.动画.延时策略. 使用Handler实现弹性滑动 效果可 ...