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. mysql 允许远程访问

    原来装mysql数据库的时候就想,这个只要在本地访问就可以了,没有必要让远程访问.可是,今天想把数据放到远程的机器上,却发现,不是简单的将sql语句(指导出的语句)执行一遍就行了,对于那些自增的字段, ...

  2. Listbox简单用法

    <ListBox x:Name="ListBoxPatientAllergy" Grid.Row="1" ItemContainerStyle=" ...

  3. python动态获取对象的属性和方法 （转载）

    首先通过一个例子来看一下本文中可能用到的对象和相关概念. #coding:utf-8 import sys def foo():pass class Cat(object): def __init__ ...

  4. Android Studio使用百度地图示例BaiduMapsApiASDemo

    Android Studio使用百度地图示例BaiduMapsApiASDemo 用自己AVD下的debug.keystore替换掉项目中的debug.keystore 生成自己的签名 同样的方法生成 ...

  5. Oracle:ORA-00955: name is already used by an existing object

    下午从生产库导出了一份表结构,用来测试一些问题,由于生产库连接着其他用户下的表所以通过视图在本地模拟一下,于是创建视图: create or replace view csews as select ...

  6. poj 1276 Cash Machine（多重背包）

    Cash Machine Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 33444   Accepted: 12106 De ...

  7. deeplab hole algorithm

    最近看了几篇文章,其中均用到了hole algorithm. 最早用的就是deeplab的文章了,Semantic Image Segmentation with Deep Convolutional ...

  8. ASP.NET MVC4中@model使用多个类型实例的方法

    转http://blog.csdn.net/hulihui/article/details/48199897

  9. 很多事情就像看A片，看的人觉得很爽，做的人未必。

    http://m.jingdianju.com/wzgs/shenghuo/201307185135.html 转载自: 从这个角度上来说,我不太赞成过于关注第一份工作的薪水,更没有必要攀比第一份工作 ...

  10. RedHat 6.7 Enterprise x64环境下使用RHCS部署Oracle 11g R2双机双实例HA

     环境 软硬件环境 硬件环境: 浪潮英信服务器NF570M3两台,华为OceanStor 18500存储一台,以太网交换机两台,光纤交换机两台. 软件环境: 操作系统:Redhat Enterpris ...