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 ...
随机推荐
- hi3531的h264压缩中改动波特率
typedef struct hiVENC_ATTR_H264_CBR_S { HI_U32 u32Gop; HI_U32 u32StatTime; HI_U32 u32ViFrmRate; HI_F ...
- mysql 函数在源码中的定义
大牛那海蓝蓝 MySQL提供了较为丰富的SQL语句,用以支持MySQL提供的主要功能.在数据库内部,MySQL又是怎么知道自己能够处理哪些对象.处理哪些事情的? 如果我们输入一条SQL语句,MySQL ...
- 【转】开发者分享如何创造一款优秀的iOS游戏——2013-08-25 17
http://game.dapps.net/gamedev/experience/889.html 创造出<Temple Run>的夫妻团队在高峰时期每天能够获得"好几万&quo ...
- sbit命令行中运行scala脚本
一般sbit编译器采成了scala运行工具.启动sbit命令行,输入console,命令行自动切换到scala编辑器面. scala>:paste 然后手动将XXX.scala中的代码拷贝到界面 ...
- [转]SharePoint 2010 Download as Zip File Custom Ribbon Action
在SharePoint 2010文档库中,结合单选框,在Ribbon中提供了批量处理文档的功能,比如,批量删除.批量签出.批量签入等,但是,很遗憾,没有提供批量下载,默认的只能一个个下载,当选择多个文 ...
- react中的坑
9. 渲染界面的时候让滚动条回到顶部 //渲染界面的时候让滚动条回到顶部 componentDidMount() { window.scrollTo(0,0); } 路由: <Route pat ...
- Oracle+FluentData+MVC4+EasyUI开发权限管理系统之开篇
在园子里有很多EF+MVC+EasyUI的框架实在是太多了,经过在一段时间的学习高手写的思路,但是都是针对Sql数据的,但是今年我当上研发组组长的第一个任务就是编写一个通用平台框架,一刚开始想把学习过 ...
- 20160329javaweb之JSP -session入门
3.Session Session 是一个域 !!作用范围:当前会话范围 !!生命周期: 当程序第一次调用到request.getSession()方法时说明客户端明确的需要用到session此时创建 ...
- 那天有个小孩跟我说LINQ（三）转载
1 LINQ TO Objects续2(代码下载) 新建项目 linq_Ch3控制台程序 1.1 操作字符串 ①查找字符串中包含的大写字母,字符串是由多个char类型组 ...
- Web前端/后端
Web前端: 1)精通HTML,能够书写语义合理,结构清晰,易维护的HTML结构. 2)精通CSS,能够还原视觉设计,并兼容业界承认的主流浏览器. ...