废话不多说，直接上代码

网页客户端

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>client</title>

 </head>

 <body>

     <button onclick="testClick()">点击</button>

     <br>

     <div id ="res_data"></div>

 <script src="http://code.jquery.com/jquery-latest.js"></script>

 <script type="text/javascript">

     function testClick(){

         var HTTPrequest = new XMLHttpRequest();

         HTTPrequest.open("POST","http://192.168.3.151:8385/",true);

         HTTPrequest.setRequestHeader("Content-Type","text/html; charset=utf-8");

         HTTPrequest.withCredentials = true;

         var msg = "this is a request";//新建一个字符串，通过send方法发送给服务器

         HTTPrequest.send(msg);

         HTTPrequest.onload = function (e){

             $('#res_data').append("<p>"+ HTTPrequest.responseText +"</p>");//有返回信息时将信息打印在页面

         }

         HTTPrequest.onerror = function(e){

             alert('请求失败');

         }

     }

 </script>

 </body>

 </html>

实际效果：

就是一个最最简单的页面，当点击页面按钮时 将请求发送到服务端

下面是node.js写的服务端的代码

 var http = require('http');

 var PORT = 8385;

 http.createServer(function (req, res) {

     req.on('data', function(data) {

         console.log(data.toString());

     });

     res.setHeader("Access-Control-Allow-Credentials", "true");

     res.setHeader("Access-Control-Allow-Origin", "http://192.168.3.151:9000");

     res.setHeader("Access-Control-Allow-Headers", "Content-Type");

     res.setHeader("content-type", "text/html; charset=utf-8");

     var msg = "this is a response";

     res.end(msg);

 }).listen(PORT, function () {

     console.log('server is listening on port ' + PORT);

     })

其中 7 8 9 这3行都是为了处理网页跨域的设置

现在运行这个node

服务器就启动好了

前端点击发送请求，服务端接收到请求，服务端也返回信息给网页

麻雀虽小五脏俱全，这样一个前端-后端的系统就写好了

从HTML到node.js以及跨域问题的解决的更多相关文章

  1. vue-cli3.0+node.js+axios跨域请求session不一样的问题

    一.问题重述 使用的是,前后端分离,前端vue+axios请求,后端使用node搭建服务端接口,遇到的问题是,我通过登录接口吧数据存储型在session,我登录上以后,发现再次验证登录(另一个接口)的 ...

  2. node.js 关于跨域和传递给前台参数

    /*为app添加中间件处理跨域请求*/ app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin& ...

  3. NodeJ node.js Koa2 跨域请求

    Koa2 .3 跨域请求 Haisen's  需求分析 (localhost:8080 = 前端  [请求]  localhost:8081 = 服务器 ) 1.一个前台    一个服务器    前台 ...

  4. js的跨域问题和解决办法

    我们在开发中,经常会遇到跨域请求数据问题,那么什么是跨域呢?跨域就是js在不用域之间的数据传输或者通信,比如你在使用ajax从另外一个域请求数据,或者你的页面引入了iframe,要从iframe中获取 ...

  5. node.js设置跨域

    app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*& ...

  6. js执行跨域请求

    //js执行跨域请求 var _script = document.createElement('script'); _script.type = "text/javascript" ...

  7. js 跨域的问题 （同一个主域名不同的二级域名下的跨域问题） 解决 WdatePicker.js my97日期选择控件

    例如域名是  a.xx.com  和 b.xx.com    如果一个页面中引入多个iframe,要想能够操作所有iframe,必须都得设置相同domain. 如果iframe的时候  a包含b  为 ...

  8. js调用跨域

    web aapi 初体验 解决js调用跨域问题   跨域界定 常见跨域: 同IP不同端口: http:IP:8001/api/user     http:IP:8002/api/user 不同IP不同 ...

  9. js&jquery跨域详解jsonp，jquery并发大量请求丢失回调bug

    URL  说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http:/ ...

随机推荐

  1. MGR安装

    二.环境准备 主机名 IP地址 角色 node2.com 172.16.8.101 primary node3.com 172.16.8.53 seconde node3.com 172.16.8.6 ...

  2. Kubernetes-Service资源详解

    service的三种工作模式:(userstats(效率低).iptables.ipvs) service可以自动实现负载均衡.service自动实现了负载均衡,service通过selector标签 ...

  3. json通过后台获取数据库中的内容，并在前端进行显示

    fastjson.jar以及Echarts树图的js文件(需要在servlet对json进行赋值,所以需要用到json的插件) 链接:https://pan.baidu.com/s/1GBbamPNG ...

  4. NetModular 新年第一更以及升级指南(打造简单易用的.Net Core模块化快速开发框架~)

    先给大家拜个晚年,祝大家身体健康,远离肺炎~ NetModular开源已有一年,在这一年收到了很多建议,框架也变得越来越完善.这次更新包括了从去年年尾到现在所做的更改,感觉更改的内容还是蛮多的,所以记 ...

  5. SpringBoot学习遇到的问题(1) - 配置文件有日志的debug模式等配置项，为什么不起作用

    这个问题困扰我近乎两天,通过查找N多资料后终于解决,写下来共享给大家. logging.level.root=DEBUG ... 一系列的日志配置项,都不起作用的原因是springboot启动加载不到 ...

  6. appcompat_v7 res values-v21 error

    [2014-11-03 11:30:25 - AndroidApp] appcompat_v7/res/values-v21/styles_base.xml:75: error: Error retr ...

  7. eclipse 连接sql sever

    https://www.cnblogs.com/newen/p/4428541.html 和eclipse连接mysql相似,只是 String url="jdbc:sqlserver:// ...

  8. React+wangeditor+node富文本处理带图片上传

    最近有个需求出现在我的视野中,因为我的另外的博客需要上传文章,但是我不想每次都在我的数据库中慢慢的修改格式,所以我另做了一个后台去编辑文本后发送给服务器,那么这里就涉及到两点,一个是富文本,一个是需要 ...

  9. Jenkins: QQ/Wechat机器人群消息通知Job构建结果

    简介 Jenkins是持续化集成的一个核心部件,它上游从仓库(gitlab)等拉取代码,经编译构建,将应用发布至下游目标环境:构建结果通知的方式有很多,现成的插件有邮件和钉钉方式,但是就方便的角度,通 ...

  10. VFP调用API来控制USB摄像头，实现拍照或录像

    *--前提:VFP7.0以上;Windows 2K及以上*--控件:AVICAP32.DLL *--定义:一般放到主程序或表单(集)的Load事件中Public WM_CAP_DRIVER_DISCO ...