XMLHttpRequest cannot load http://localhost:3000/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

上面是我学习nodejs中碰到的一个异常，下面有代码以及解决方案。

1）js文件代码

var http=require('http');
var querystring=require('querystring');

http.createServer(function(req,res){
　　var postData='';
　　req.setEncoding('utf8');

　　req.on('data',function(chunk){
　　　　postData+=chunk;
　　});
　　req.on('end',function(){
　　　　res.end(postData+"hehe");
　　});
}).listen(3000);
console.log("服务启动。。。")

2）前端html页面代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
　　$("#test").click(function(){
　　　　$.ajax({
　　　　　　'url':'http://localhost:3000',
　　　　　　'method':'POST',
　　　　　　'data':{},
　　　　　　'success':function(data){
　　　　　　　　console.log(data);
　　　　　　}
　　　　});
　　});
})
</script>
</head>
<body>
<p id="test">click me</p>
</body>
</html>

这是一个简单的ajax访问nodejs服务器demo,我的服务运行在windows10系统上。

win键+R 输入CMD 调出命令行工具，输入:node -v    查看是否安装了nodejs以及版本。

通过cd命令定位到js文件所在目录，输入:node js文件名    运行js文件

谷歌浏览器打开html文件点击click me然后按F12发现上文所说错误。

解决思路，百度一下发现是ajax跨域访问问题

在createServer方法里面第一行设置 res.setHeader('Access-Control-Allow-Origin', '*');

*号代表允许任何与的请求，当然实际生产环境不可能这么做。

你可以通过报错提示找到被拒绝的域然后设置res.setHeader('Access-Control-Allow-Origin', '域名');

比如我在HBulider里面打开html文件是这样设置res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8020');

在本地直接打开html文件可以这样子设置res.setHeader('Access-Control-Allow-Origin', 'null');

http://wishing.vip/ 这是我的移动端博客网址，里面有很多H5的实例。

会java或者c#等服务端语言的可以对比下

nodejs搭建一个web服务的是多么简单，不需要tomcat等http服务器，因为它内置了一个http服务器。

nodejs前端跨域访问的更多相关文章

  1. 解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题

    问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, ...

  2. REST API之前端跨域访问

    关键字:跨域访问,cross-origin, NodeJS, REST API, JavaScript, Access-Control-Allow-Origin 1.新建并运行一个 NodeJS的se ...

  3. Nodejs允许跨域访问

    状况:本地的前端项目(uni-app)以及后台管理(vue-mongo-node)和本地mongo数据库 前台项目端口是8082,后台数据接口是8081. 跨域解决,直接上代码: uni-app的ma ...

  4. nodejs设置跨域访问

    //设置跨域访问app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", ...

  5. nodejs 设置跨域访问

    app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false })); a ...

  6. 前端跨域问题的总结&&nodejs 中间层的路由转发

    前后端交互的时候,跨域是避不开的问题. 总结就是如下: 1.Cors 我在做前后端分离的时候,会采用cors 的方法:便于其他源的调用接口,这个可以设置成任意的源头,也可以允许指定的源头. 下面的是n ...

  7. 从前端和后端两个角度分析jsonp跨域访问（完整实例）

    一.什么是跨域访问 举个栗子:在A网站中,我们希望使用Ajax来获得B网站中的特定内容.如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题.你可以理解为两个域名之间不能跨过域名来发送请求或者请 ...

  8. java后台设计简单的json数据接口，设置可跨域访问，前端ajax获取json数据

    在开发的过程中,有时候我们需要设计一个数据接口.有时候呢,数据接口和Web服务器又不在一起,所以就有跨域访问的问题. 第一步:简单的设计一个数据接口. 数据接口,听起来高大上,其实呢就是一个简单的Se ...

  9. Ajax.Nodejs.跨域访问

    使用环境: 客户端: jQuery 服务器: Node.js 在通过Ajax调用非本域的链接/接口时, 一般是不能成功的, 就算是同一个IP下不同的端口也被认作跨域访问 解决办法记录如下: 客户端: ...

随机推荐

  1. 316. Remove Duplicate Letters

    Given a string which contains only lowercase letters, remove duplicate letters so that every letter ...

  2. Javascript浏览器对象模型BoM要点总结

    BOM要点总结篇 温故而知心!!学到的东东,必须要总结一下,方便自己,巩固自己.今天我为大家总结一下BOM当中的一些要点: 一.Windows对象 1.窗口的操作 windows对象对操作浏览器窗口非 ...

  3. oracle数据库导入、导出

    导出:exp BFXXLZ/BFXXLZ123@192.168.63.63:1521/ORCL file=d:\BFXXLZ.dmp 导入:imp BFXXLZ/BFXXLZ123@ORCL file ...

  4. iOS开发常见BUG和一些小技巧（ps:耐心看完，很实用）

    [385][scrollView不接受点击事件,是因为事件传递失败] // // MyScrollView.m // Created by beyond on 15/6/6. // Copyright ...

  5. sql group by datetime on day

    SELECT        DATEADD(dd, DATEDIFF(dd, 0, postDate), 0)FROM          tableWHERE        (postDate > ...

  6. 在CentOS上搭建Storm集群

    Here's a summary of the steps for setting up a Storm cluster: Set up a Zookeeper clusterInstall depe ...

  7. 为什么C#中应该用Try-Catch？

    [为什么C#中应该用Try-Catch?] http://blog.csdn.net/dier4836/article/details/7292897

  8. angular 调试 js (分 karms protractor / test e2e unit )

    首页订阅 Protractor端到端的AngularJS测试框架教程 2014年01月18日 分类:教程, JavaScript, AngularJS Protractor是一个建立在WebDrive ...

  9. iframe高度调整

    //设置iframe高度 function setHeight(){ var originalHeight=$(window).height(); var headerHeight=$('.heade ...

  10. hdu4578 Transformation

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4578 题目大意:n个数(初始为0)m个操作,操作类型有4种,操作1把区间的每个数+a,操作2把区间的每 ...