REST API之前端跨域访问
关键字：跨域访问，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之前端跨域访问的更多相关文章
- 解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题
问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, ...
- nodejs前端跨域访问
XMLHttpRequest cannot load http://localhost:3000/. No 'Access-Control-Allow-Origin' header is presen ...
- beego api 服务允许跨域访问，解决前端访问报Access-Control-Allow-Origin问题
背景: golang做了个简单服务,前端get请求拿数据,报错:No 'Access-Control-Allow-Origin' header is present on the requested ...
- web api中允许跨域访问
①添加owin的引用 ②添加owin.Cors的引用 ③在WebApiConfig中添加 config.EnableCors(new EnableCorsAttribute("*" ...
- 支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示
随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Angularjs的框架来做UI,而数据则由另一个Web Api 的网站项目来支撑.注意,这里是 ...
- 在dotnet core web api中支持CORS（跨域访问）
最近在写的Office add-in开发系列中,其中有一个比较共性的问题就是在add-in的客户端脚本中访问远程服务时,要特别注意跨域访问的问题. 关于CORS的一些基本知识,请参考维基百科的说明:h ...
- Flask设置Access-Control_Allow_Origin实现跨域访问
前端访问Flask的接口,浏览器报错:has been blocked by CORS policy: No 'Access-Control-Allow-Origin' heade 需要将Flask的 ...
- 如何让你的 Asp.Net Web Api 接口，拥抱支持跨域访问。
由于 web api 项目通常是被做成了一个独立站点,来提供数据,在做web api 项目的时候,不免前端会遇到跨域访问接口的问题. 刚开始没做任何处理,用jsonp的方式调用 web api 接口, ...
- Web Api 2(Cors)Ajax跨域访问
支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示 随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Ang ...
随机推荐
- Mac下安装cocos2d-x环境
安装后xcode之后,下载cocos2dx压缩包,解压 通过中断cd到cocos2dx文件夹内 输入下行命令 sudo ./install-templates-xcode.sh 执行成功后打开xcod ...
- 分布式助手Zookeeper（二）
分布式助手Zookeeper(二)博客分类: Zookeeper zookeeperzookeeper的安装和配置观察者observer 散仙在上篇文章介绍了,zookeeper的一系列基础知识,如果 ...
- linux系统磁盘分区之parted
对于linux的分区通常可以使用fdisk命令工具和parted工具 对于分区表通常有MBR分区表和GPT分区表 对于磁盘大小小于2T的磁盘,我们可以使用fdisk和parted命令工具进行分区 对于 ...
- insert into ... on duplicate key update 与 replace 区别
on duplicate key update:针对主健与唯一健,当插入值中的主健值与表中的主健值,若相同的主健值,就更新on duplicate key update 后面的指定的字段值,若没有相同 ...
- 标准I/O库之标准输入、标准输出和标准出错
对一个进程预定义了三个流,并且这三个流可以自动地被进程使用,它们是:标准输入.标准输出和标注出错.这些流引用的文件与文件描述符STDIN_FILENO.STDOUT_FILENO和STDERR_FIL ...
- 截获导航控制器系统返回按钮的点击pop及右滑pop事件
前几天看了@栾小布的一篇文章:Custom backBarButtonItem,在跟着做的时候我又顺便扩展了一些,写此文章的目的是为了总结一下自己所写的东西,方便以后翻看容易,同时也是自己入行iOS一 ...
- sql快速生成大量数据
先插入一条数据 insert into table(a,b,c,d) values(1,2,3,4) 然后重复执行以下sql语句 没执行一次 数据就会倍增 insert into table(a,b, ...
- I2C Verilog的实现（二）
1. 起始结束信号的判断 //--------------------------------------------- //start,stop condition judgement //---- ...
- GridView中使用如下button OnClientClick代码会出现解析错误
在GridView中使用如下代码会出现解析错误: <asp:LinkButton ID="DeleteButton" runat="server" Cau ...
- Yii框架页面运行流程
Yii框架页面运行流程 CComponent | CModel | CActiveRecord.CFormModel(所有模型的父类) | 表名.php(模型) | 入口文件------------- ...