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. try--catch--finally中return返回值执行的顺序（区别）

    1.try块中没有抛出异常,try.catch和finally块中都有return语句 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 public static int ...

  2. Android Runtime

    [Android Runtime] Every Android application runs in its own process, with its own instance of the Da ...

  3. angularjs（一）基础概念

    一.前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,作为一名业界新秀,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.当听到AngularJs这个名字并知道是google在维 ...

  4. PowerDesigner使用教程

    PowerDesigner是一款功能非常强大的建模工具软件,足以与Rose比肩,同样是当今最著名的建模软件之一.Rose是专攻UML对象模型的建模工具,之后才向数据库建模发展,而PowerDesign ...

  5. [2015hdu多校联赛补题]hdu5384 Danganronpa

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5384 题意:函数f(A, B)定义:A.B为字符串,f(A, B)为A中有多少个不同的B(ex:f(& ...

  6. thinkphp 动态验证码

    <?php namespace Home\Controller; use Think\Controller; class TestController extends Controller { ...

  7. mysql从零开始

    常用的数据库有哪些? oralce,sqlserver,mysql,db2 有钱就用oracle吧 oracle和mysql的区别:https://zhidao.baidu.com/question/ ...

  8. eclipse- Web-app verson=2.5 调整将Dynamic Web Module3.0降为2.5

    如果提示cannot change version of project facet Dynamic Web Module to 2.5 1.把Dynamic Web Module复选框,勾选去掉,点 ...

  9. 关于JS 沙箱（转）

    javascript中的沙箱并非传统意义上的沙箱,只是一种语法上的hack写法而已,javascript中处理模块依赖关系的闭包被称之为沙箱,和 ajax一样,这种sandbox coding风格是一 ...

  10. 一天一经典Reducing the Dimensionality of Data with Neural Networks [Science2006]

    别看本文没有几页纸,本着把经典的文多读几遍的想法,把它彩印出来看,没想到效果很好,比在屏幕上看着舒服.若用蓝色的笔圈出重点,这篇文章中几乎要全蓝.字字珠玑. Reducing the Dimensio ...