关键字：跨域访问，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. CAS SSO对手机应用支持的一种思路

    原文地址: http://architecture3.riaos.com/?p=3095368 手机和桌面应用访问CAS,我们不能直接使用CAS提供的web api.不过CAS提供了一个插件,叫CAS ...

  2. Add-VMNetworkAdapterAcl（添加访问控制列表）

    Add-VMNetworkAdapterAclCreates an ACL to apply to the traffic through a virtual machine network adap ...

  3. HTTP POST发消息

    业务需求:模拟TANX给DSP发消息,protobuf数据已弄好. 代码: def PostDataToDSP(self,url,postdata): headers = { #taobao文档规定 ...

  4. celery expires 让celery任务具有时效性

    起因:有的时候.我们希望任务具有时效性.比方定时每5分钟去抓取某个状态,由于celery队列中的任务可能非常多,等到这个任务被运行时.已经超过了5分钟,那么这个任务的运行已经没有意义.由于下一次抓取已 ...

  5. 手机端轻应用模拟原生的下拉刷新效果（JavaScript）

    方案一:使用iscoll等有下拉功能的框架. 分析:因为项目的结构已经基本完成,再使用框架,会与原来的结构互相影响: 方案二:用JavaScript.Jquery写. 分析:可能没有直接使用框架的效果 ...

  6. <!--[if lt IE]>

    代码如下时 <!--[if lt IE9]> <script src="js/html5shiv.js"></script> <![end ...

  7. ACM/ICPC ZOJ1009-Enigma 解题代码

    #include <iostream> #include <string> using namespace std; int main() { int strwide; cin ...

  8. 【转】iOS开发——基本常识篇&各种控件默认高度

    原文:http://www.cnblogs.com/iCocos/p/4595614.html 各种控件默认高度   1.状态栏 状态栏一般高度为20像素,在打手机或者显示消息时会放大到40像素高,注 ...

  9. sql server经典sql

    1. sql server构造oracle rownum列 select * from ( select row_number() over(order by t.修改时间 desc) rownum, ...

  10. 用java制作日历，想休息的时候看一看离周末还有几天！

    呀!忙碌的每一天,都忘记了明天就是我们愉快周末了.今天没有朋友的闲聊的话,明天处在绷紧的状态呢!还有朋友提到,所有今天来跟大家分享一下用java来编写日历表,累了想休息了的时候,打开看看,还有几天到周 ...