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. json与对象转化

    /// <summary> /// 把JSON字符串还原为对象 /// </summary> /// <typeparam name="T">对 ...

  2. Office 365 系列三 ------ 创建Office 365普通账号

    当我们购买或者试用Office 365的时候,微软或者世纪互联会发一封邮件给我们,里面就只有管理员的账号,那么作为我们IT 管理员应该给员工创建账号, 创建的过程如下: 一.登陆: http://po ...

  3. LINUX退出当前进程——比较return、exit()

    1.在Linux中任何让一个进程退出 进程退出表示进程即将结束.在Linux中进程退出分为了正常退出和异常退出两种. 1>正常退出 a. 在main()函数中执行return . b.调用exi ...

  4. centos配置epel

    1.下载epel wget http://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm 2.安装epel rpm -iv ...

  5. 转载：Solr的自动完成实现方式（第三部分：Suggester方式续）

    转自:http://www.cnblogs.com/ibook360/archive/2011/11/30/2269126.html 在之前的两个部分(part1.part2)中,我们学会了如何配置和 ...

  6. Node.js intro

    1. require() load module http://stackoverflow.com/questions/9901082/what-is-this-javascript-require ...

  7. [Zigbee]定时器1

    注意:在定时器可以使用一个输入/输出引脚之前,所需的 I/O 引脚必须配置为定时器 1 的外设引脚. 定时器1的引脚映射方案选用是备用2方案:P07对应通道3.P06-通道4.P12-通道0.P11- ...

  8. 北邮oj 题

    题目描述 Every year,prince prepares a birthday gift for princess.The gift is a box,which is decorated wi ...

  9. Coursera Machine Learning : Regression 多元回归

    多元回归 回顾一下简单线性回归:一个特征,两个相关系数 实际的应用要比这种情况复杂的多,比如 1.房价和房屋面积并不只是简单的线性关系. 2.影响房价的因素有很多,不仅仅是房屋面积,还包括很多其他因素 ...

  10. JavaSE知识结构