REST API之前端跨域访问

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>

本栏目更多精彩内容：http://www.bianceng.cnhttp://www.bianceng.cn/webkf/tools/

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”。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索request
， express
， users
， router
， var
， resource
js跨域调用restful
rest api 跨域、rest 跨域访问、restangular跨域访问、前端调用rest api、前端ajax调用rest api，以便于您获取更多的相关知识。