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‘);

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

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

时间: 2024-08-01 08:24:03

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

html5的postmessage实现js前端跨域访问及调用解决方案

关于跨域访问,使用JSONP的方法,我前面已经demo过了,具体见http://supercharles888.blog.51cto.com/609344/856886,HTML5提供了一个非常强大的API,叫postMessage,它其实就是以前iframe的进化版本,使用起来极其方便,这里举个实验例子: 我们依旧按照与上文相同的设定,假定我们有2个Domain Domain1: http://localhost:8080  它上面有个应用叫HTMLDomain1,并且有个页面叫sender.

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

问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, 既然每次请求都是一个新的会话, 那我们去获取session的时候自然就是null了. 解决办法如下: 环境: vue 2.0 springboot 2.1.6 一.前端部分 1.  在vue引入axios的位置添加以下代码 import axios from 'axios' axios.defau

前端跨域访问

1. JSONP 2. CORS(Cross-origin resource sharing) 2.1 运行模式 2.2 JQuery支持CORS 2.3 与JSONP相比 3. 跨域访问在点评的应用 References 在互联网应用中: 一个页面需要请求多个域名下的web服务端接口 同时一个web服务接口可能会被很多不同域名下的页面请求. 一个web应用如果支持为了支持以上模式而申请多个域名是不合算的,因为域名申请和管理所占用的资源比较大,因此服务端支持跨域就成了一个更合理的解决方案.解决跨

nodejs设置跨域访问

//设置跨域访问app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods",&qu

解决傻瓜式前后端分离前端跨域访问的问题

版本号49之后的chrome跨域设置chrome的版本升到49之后,跨域设置比以前严格了,在打开命令上加--disable-web-security之后还需要给出新的用户个人信息的目录.众所周知chrome是需要用gmail地址登录的浏览器,登录后就会生成一个存储个人信息的目录,保存用户的收藏.历史记录等个人信息.49版本之后,如果设置chrome浏览器为支持跨域模式,需要指定出一个个人信息目录,而不能使用默认的目录,估计是chrome浏览器怕用户勿使用跨域模式泄露自己的个人信息(主要是cook

angularjs 控制器不能访问nodejs 3000端口,跨域访问

目前做的一个项目,前端采用的是angularjs,后端nodejs做服务器. 我尝试使用接下里的方式来发起对nodejs服务器的请求: <span style="font-family:SimHei;font-size:18px;"> $http.get('http://localhost:3000/') .success(function (data) { $scope.index = data; }) .error(function (data) { $scope.in

前端的跨域访问解决方案!

方案一].json跨域访问问题,可以把json拷贝到当前服务器中来 错误提示信息:XMLHttpRequest cannot load http://www.runoob.com/try/angularjs/data/Customers_JSON.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefor

前端跨域请求原理及实践

前端跨域请求原理及实践 2017-03-03 前端大全 (点击上方公众号,可快速关注) 作者:高鹏 tingandpeng.com/2016/09/05/前端跨域请求原理及实践/ 如有好文章投稿,请点击 → 这里了解详情 一. 跨域请求的含义 浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本(如 JavaScript)对不同域的服务进行跨站调用. 一般的,只要网站的 协议名protocol. 主机host. 端口号port 这三个中的任意一个不同,网站间的数据请求与传输便构成了跨域调用.

前端跨域总结

什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 1.) 资源跳转: A链接.重定向.表单提交 2.) 资源嵌入: <link>.<script>.<img>.<frame>等dom标签,还有样式中background:url().@font-face()等文件外链 3.) 脚本请求: js发起的ajax请求.dom和js对象的跨域操作等 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场