废话不多说，直接上代码

网页客户端

 <!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. JQuery--使用JQuery 的$.ajax 方法进行异步请求，导致页面闪烁

    情景 目前有个需求是在文本框填入内容,自动触发keyup事件,下拉列表会自动过滤相应的选项,但是使用了$,ajax后发现,每次触发事件时,都导致整个网页闪烁,触发了全局ajax事件 代码片段 $.aj ...

  2. vuex源码简析

    前言 基于 vuex 3.12 按如下流程进行分析: Vue.use(Vuex); const store = new Vuex.Store({ actions, getters, state, mu ...

  3. ps-如何移动照片里的内容

    1.我们用内容感知移动工具把所要移动的区域大致勾选出来. 2.然后我们将所选区域拖动(点击鼠标左键不放拖动). 3.松开鼠标 4.仿制图章工具,alt 键取样,涂抹

  4. css- :before :after

    :before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下: #example:before { conte ...

  5. kubernetes中node心跳处理逻辑分析

    最近在查看一个kubernetes集群中node not ready的奇怪现象,顺便阅读了一下kubernetes kube-controller-manager中管理node健康状态的组件node ...

  6. HDU_5230_DP

    http://acm.hdu.edu.cn/showproblem.php?pid=5230 有初始值c,给你1~n的数,输入c+一些数,使得结果在l~r的范围内,输出方案数,注意每种方案中每个数只能 ...

  7. SSH: ssh隧道

    简介 Secure Shell(安全外壳协议,简称SSH)是一种加密的网络传输协议,可在不安全的网络中为网络服务提供安全的传输环境.SSH通过在网络中创建安全隧道来实现SSH客户端与服务器之间的连接. ...

  8. num13---外观模式/过程模式

    假设家庭影院有一系列设备,每个设备都有各种开闭等功能性方法,使用家庭影院功能的时候,需要进行各个设备的一系列操作,繁琐麻烦. 现在提供一个外观类,在里面定义操作流程,客户端只需要和外观类进行接口交互即 ...

  9. php 对象示例

    <?php header("content-type:text/html; charset=utf-8"); error_reporting(E_ALL); class My ...

  10. maven mvn 安装介绍

    maven是什么? Maven是基于项目对象模型(POM project object model),可以通过一小段描述信息(配置)来管理项目的构建,报告和文档的软件项目管理工具 Maven 除了以程 ...