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 ...
随机推荐
- 关于WinRT中c++和c#相互调用的问题
先说结论(不见得是最终正确的结论,不过google了一晚上也没有查出个所以然来,即便有解决方法我也认为是微软傻x): 首先c#和c++理所应当的不应该在同一个工程中,而只能是同一个工程的两个项目.只能 ...
- android96 内存创建图片副本，画画板
package com.itheima.copy; import android.os.Bundle; import android.app.Activity; import android.grap ...
- block_dump观察Linux IO写入的具体文件(mysqld）
一.使用方法: 二.基本原理: 三.总结 很多情况下开发者调测程序需要在Linux下获取具体的IO的状况,目前常用的IO观察工具用vmstat和iostat,具体功能上说当然是iostat更胜一筹 ...
- javascript笔记08：javascript的if...else语句
案例代码如下: <!DOCTYPE html> <html> <body> <p>点击这个按钮,获得基于时间的问候.</p> <but ...
- javascript进击（四）HTML DOM
HTML DOM (文档对象模型) 什么是DOM? DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准. W3C 文档对象模型 (DOM) 是中立于平台和语 ...
- Git之路--2
- 关于U3D画面出现卡顿的问题
在U3D中,曾近遇到过卡顿的问题,下面说明解决方法 一:在关于相机移动的函数中,移动的函数不应该放在Update里面应该放到LateUpdate 二:如果最开始建立项目的时候选择的时候是3D游戏,如果 ...
- Asp.net 上传文件小叙（修改FileUpload显示文字等）
想要在asp.net网站上上传文件就得用到FileUpload,可是这个控件中“浏览”没法修改,可以使用html中<input type="file" 来解决该问题. 首先页 ...
- Net预编译 真的好用与否
公司手机网站上千个 ASP.NET开发一套程序只是配置不一样,所有站点呈现的内容就不一样了, 以前的程序是ASP的,现在ASP程序猿少之又少了,所以公司要求转.NET,新开发也用NET.所有现在上千个 ...
- MongoDB 2.6.x 的安装部署
1. 下载mongodb 2.6.x版本的zip包,在D盘创建目录MongoDB,解压缩到D:\MongoDB目录. 创建数据库目录D:\MongoDB\data,接下来打开命令行窗口,切换到D:\M ...