关键字：跨域访问，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. 软中断&amp;tasklet&amp;工作队列

    软中断 软中断的分配时静态的(即在编译时定义),而tasklet的分配和初始化能够在执行时进行. 软中断(即便是同一种类型的软中断)能够并发地运行在多个CPU上. 因此,软中断是可重入函数并且必须明白 ...

  2. 【C语言】编写一个函数实现n^k，使用递归实现

    #include <stdio.h> int fuc(int x,int n) { if(n!=1) return x*fuc(x,n-1); return 1; } int main() ...

  3. IFrame 根据嵌入页面自动调节大小

    很多人估计会遇到这样的情况,在IFrame嵌入某些页面,总会出现滚动条,那么有没方法,可以让IFrame随着嵌入页面的内容大小自动调节大小而不出现滚动条呢?答案是肯定的,经过查找,本人发现用Ifram ...

  4. java21 封装Response:

    封装Response: /** * 封装响应信息 */ public class Response { //两个常量 public static final String CRLF="\r\ ...

  5. MySQL主主复制+LVS+Keepalived实现MySQL高可用性1

    http://bestvivi.com/2015/09/09/MySQL%E4%B8%BB%E4%B8%BB%E5%A4%8D%E5%88%B6+LVS+Keepalived%E5%AE%9E%E7% ...

  6. careercup-数学与概率 7.5

    7.5 在二维平面上,有两个正方形,请找出一条直线,能够将这两个正方形对半分.假定正方形的上下两条边与x轴平行. 解法: 要将两个正方形对半分,这条线必须连接两个正方形的中心点.利用slope=(y1 ...

  7. SpringMVC关于json、xml自动转换的原理研究[附带源码分析 --转

    SpringMVC关于json.xml自动转换的原理研究[附带源码分析] 原文地址:http://www.cnblogs.com/fangjian0423/p/springMVC-xml-json-c ...

  8. leetcode每日解题思路 221 Maximal Square

    问题描述: 题目链接:221 Maximal Square 问题找解决的是给出一个M*N的矩阵, 只有'1', '0',两种元素: 需要你从中找出 由'1'组成的最大正方形.恩, 就是这样. 我们看到 ...

  9. 【iOS程序启动与运转】- RunLoop个人小结

    学习iOS开发一般都是从UI开始的,从只知道从IB拖控件,到知道怎么在方法里写代码,然后会显示什么样的视图,产生什么样的事件,等等.其实程序从启动开始,一直都是按照苹果封装好的代码运行着,暴露的一些属 ...

  10. JSTL-core核心代码标签库中的if,set,out等的功能

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...