关键字:跨域访问,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. winform窗体跟随窗体

           Form2 frm2 = new Form2();         private void MoveProc()         {             frm2.StartPos ...

  2. careercup-数学与概率 7.7

    7.7 有些数的素因子只有3.5.7,请设计一个算法,找出其中第k个数. 解法: 首先,我们可以将满足条件的前几个数列出来,以此寻找解题思路. 一种简单的思路就是对于已经列出的数,我们依次去乘以3,5 ...

  3. iOS开发中常见的语句@synthesize obj=obj的意义详解

    我们在进行iOS开发时,经常会在类的声明部分看见类似于@synthesize window=_window; 的语句,那么,这个window是什么,_ window又是什么,两个东西分别怎么用,这是一 ...

  4. 加速Android Studio/Gradle构建

    已经使用Android Studio进行开发超过一年,随着项目的增大,依赖库的增多,构建速度越来越慢,现在最慢要6分钟才能build一个release的安装包,在网上查找资料,发现可以通过一些配置可以 ...

  5. Java基础知识强化之集合框架笔记74:各种集合常见功能 和 遍历方式总结

    1. Collection add() remove() contains() iterator() size() 遍历: 增强for 迭代器 |--List get() 遍历: 普通for |--S ...

  6. linux学习记录(第六章、Linux 的文件权限与目录配置)

    书看的是鸟哥的私房菜,系统用的是centos.被微软坑了N年才发现linux才是王道. 在这里记录些学习的记录.备忘

  7. 最全的ASP.NET开源CMS汇总

    转载:http://www.cnblogs.com/cxd4321/archive/2011/11/16/2250707.html 国内: 1.SiteServer CMS SiteServer CM ...

  8. 20160314 Servlet 入门

    一.Servlet 1.sun提供的一种动态web资源开发技术.本质上就是一段java小程序.可以将Servlet加入到Servlet容器中运行. *Servlet容器 -- 能够运行Servlet的 ...

  9. Android测试分析二

    什么是android测试,分为黑盒测试和白盒测试. 黑盒就是测试人员看不到代码的,针对需求而进行的一系列测试动作,看代码所展现出来的效果是否和需求一样,或者有什么意外的情况没有处理等,一般开发交给测试 ...

  10. nyoj349 poj1094 Sorting It All Out(拓扑排序)

    nyoj349   http://acm.nyist.net/JudgeOnline/problem.php?pid=349poj1094   http://poj.org/problem?id=10 ...