废话不多说,直接上代码

网页客户端

 <!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. laravel 服务容器的由来 代码展示

    <?php /** * 目的:代码的完善来说明从 基础类的调用到 工厂类的使用 再到容器的出现的原因 * (首先要明白工厂类和容器的关系 可以理解:容器就是工厂类的升级版(为了解决类的依赖)) ...

  2. 这个菜鸟花几个小时写的 DEMO 被码云推荐上首页 ?

    写在最前     没有接触过 AntV 的诸位看客可通过这篇不成文的文章稍作了解.最近 病毒猖獗,遂抽空做了一个相关小 DEMO.数据可视化方面的使用的是 AntV F2,前端框架使用 Vue 快速成 ...

  3. JQuery--JQuery面向对象编程快速入门-插件开发

    JQuery源码片段分析 (function(window){ /** * jQuery是一个函数 是一个对象 是一个构造器函数 */ var jQuery = function( selector, ...

  4. Linux学习笔记-centos查看版本号和内核信息

    1.查看centos系统版本号: 打开终端窗口: cat /etc/redhat-release 2.查看Linux内核版本信息: uname -a 或者 在图形化桌面右上角点开设置,在设置窗口选择详 ...

  5. CUDA学习(一)之使用GPU输出HelloWorld

    最近在学习CUDA,编程入门第一步便是“HelloWorld”,主要代码如下: #include "cuda_runtime.h" #include "device_la ...

  6. 【论文笔记系列】AutoML:A Survey of State-of-the-art (上)

    之前已经发过一篇文章来介绍我写的AutoML综述,最近把文章内容做了更新,所以这篇稍微细致地介绍一下.由于篇幅有限,下面介绍的方法中涉及到的细节感兴趣的可以移步到论文中查看. 论文地址:https:/ ...

  7. JAVA&&JAVA WEB开发包U盘封装版

    难以忍受机房的开发环境,就简单实现了将所有的开发文件封装进了U盘. 基于wmic的强大功能,实现了机房变态环境下的设置环境变量OS不用重新启动OS! install.bat @echo off mod ...

  8. 《Python学习手册 第五版》 -第7章 字符串基础

    本章内容是关于字符串的,字符串是编程中经常遇到的问题,本章的内容不是包含所有字符串的讲解,而是针对其最基本的内容进行说明,后续的相关章节会根据需要进行扩展和说明,例如后续的第37章内容会讲解Unico ...

  9. PC微信逆向--实现消息防撤回

    自从聊天软件消息撤回功能问世后,对于撤回的消息,我们对它一直有种强烈的好奇感."Ta刚撤回了什么?是骂我的话?还是说喜欢我?还是把发给其他人的消息误发给了我?好气呀,都看不到了...&quo ...

  10. HTML5与HTML4的区别-----通用的排版结构

    一个网页通常分为:头部,主体内容和脚部三个部分,当然也有其他更细的划分方法. 以移动端为例, 当给一个设计图,我通常使用一下结构: <div  class="container&quo ...