nodejs前端跨域访问
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前端跨域访问的更多相关文章
- 解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题
问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, ...
- REST API之前端跨域访问
关键字:跨域访问,cross-origin, NodeJS, REST API, JavaScript, Access-Control-Allow-Origin 1.新建并运行一个 NodeJS的se ...
- Nodejs允许跨域访问
状况:本地的前端项目(uni-app)以及后台管理(vue-mongo-node)和本地mongo数据库 前台项目端口是8082,后台数据接口是8081. 跨域解决,直接上代码: uni-app的ma ...
- nodejs设置跨域访问
//设置跨域访问app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", ...
- nodejs 设置跨域访问
app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false })); a ...
- 前端跨域问题的总结&&nodejs 中间层的路由转发
前后端交互的时候,跨域是避不开的问题. 总结就是如下: 1.Cors 我在做前后端分离的时候,会采用cors 的方法:便于其他源的调用接口,这个可以设置成任意的源头,也可以允许指定的源头. 下面的是n ...
- 从前端和后端两个角度分析jsonp跨域访问（完整实例）
一.什么是跨域访问 举个栗子:在A网站中,我们希望使用Ajax来获得B网站中的特定内容.如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题.你可以理解为两个域名之间不能跨过域名来发送请求或者请 ...
- java后台设计简单的json数据接口，设置可跨域访问，前端ajax获取json数据
在开发的过程中,有时候我们需要设计一个数据接口.有时候呢,数据接口和Web服务器又不在一起,所以就有跨域访问的问题. 第一步:简单的设计一个数据接口. 数据接口,听起来高大上,其实呢就是一个简单的Se ...
- Ajax.Nodejs.跨域访问
使用环境: 客户端: jQuery 服务器: Node.js 在通过Ajax调用非本域的链接/接口时, 一般是不能成功的, 就算是同一个IP下不同的端口也被认作跨域访问 解决办法记录如下: 客户端: ...
随机推荐
- DSP下的#program
2014年7月22日 最近调试使用TMS320C6713的片子调试SDRAM,中间经过很多波折,这里就不吐槽了. 想将数据或者代码放到SDRAM上一定要用到#pragma .查阅资料后,感觉百度文库的 ...
- Servlet学习五——流的分发
在上一节中有提到,流的传输,可以考虑Stream,但如果需要同时分发流和其它信息,,就需要再考虑其它方式了. 在coding中,服务端查询结果都是以gson进行传输,当需要传输一个语音并且同时需要传输 ...
- jasoncpp读取jason数据如何判断某一字段是否存在
如标题,使用json_data.isMember("XXX")来判断 jason_data["XXX"].isNull()是用来判断“XXX”字段后边的值是否为 ...
- google map 计算地图面积方法
花了几个小时把js的google计算地图面积的算法改成了c# 的. class Program { static void Main(string[] args) { // a = new qq.ma ...
- java的Iterator源码浅析
在java的集合中,List接口继承Collection接口,AbstractList类实现了List接口,在AbstractList中的内部类Itr实现了Iterator接口 ArrayList实现 ...
- eclipse项目自动发布到tomcat目录，缺文件。
eclipse项目自动发布到tomcat目录,缺文件. 解决方案: 项目--Properties-->Deployment Assembly-->Add--> Folder Add- ...
- WdatePicker日期控件的用法
前台 <td height="25" width="*" align="left"> <asp:TextBox ID=&q ...
- Android Studio 出现Failed to open zip file的问题
修改gradle . 首先我们打开setting搜索gradle.我们可以从该界面上看到gradle的版本.
- ajax的表单提交，与传送数据
ajax的表单提交 $.ajax ({ url: "<%=basePath%>resource/addPortDetectOne.action", dataType: ...
- mysql修改为utf8格式
1.修改相应数据库的编码格式: -- 修改数据库编码为utf8 ALTER DATABASE databasename CHARACTER SET utf8 COLLATE utf8_general_ ...