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 ...
随机推荐
- 解决windows server 2003不认U盘或移动硬盘
解决windows server 2003不认U盘或移动硬盘1.进入命令提示符环境(也就是DOS) 2.进入DISKPART程序 3.输入AUTOMOUNT ENABLE指令 4.OK,下次USB硬盘 ...
- [CSS] Make element not selectable
.noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safar ...
- vector中的resize与 reserve
void reserve (size_type n); reserver函数用来给vector预分配存储区大小,即capacity的值 ,但是没有给这段内存进行初始化.reserve 的参数n是推荐预 ...
- UITableViewCell的选中时的颜色及tableViewCell的selecte与deselecte
1.系统默认的颜色设置 //无色 cell.selectionStyle = UITableViewCellSelectionStyleNone; //蓝色 cell.selectionStyle = ...
- 一个项目覆盖CS所有课程的可行性探究
我们先看计算机科学有哪些子领域. 学术领域有: 计算理论 信息和编码理论 算法和数据结构 形式化方法 程序设计语言 实践领域有: 计算机体系结构 并行计算和分布式系统 实时系统和嵌入式系统 操作系统 ...
- Ubuntu server搭建vsftpd小记
Ubuntu server中搭建vsftpd小记 <h1> 在Ubuntu server中安装vsftpd</h1> sudo apt-get install vsftpd & ...
- sublime text 3快捷键设置
sublime text 3 v-3103默认快捷键设置 [ { "keys": ["ctrl+shift+n"], "command": ...
- Android应用Icon大小在不同分辨率下定义
http://www.ard9.com/gsjj/204.html 对于Android平台来说,不同分辨率下Icon的大小设计有着不同的要求,对于目前主流的 HDPI即WVGA级别来说,通常hdpi的 ...
- IP-MAC绑定导致网络故障
前段时间将一台服务器A的服务迁移至了另外一台服务器B,外网IP地址也顺带迁移过来了,结果网络出现了问题. 其中内网是畅通的,但是外网IP怎么都连不上另外一台路由C(B和C是在一个交换机下的,网段也相同 ...
- 总结Qt中经常出现的一些问题
1.Qt中用高版本打开低版本的工程 编译时出现错误 : C1189: #error : "This file was generated using the moc from 4.7.0. ...