从HTML到node.js以及跨域问题的解决
废话不多说，直接上代码
网页客户端
<!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以及跨域问题的解决的更多相关文章
- vue-cli3.0+node.js+axios跨域请求session不一样的问题
一.问题重述 使用的是,前后端分离,前端vue+axios请求,后端使用node搭建服务端接口,遇到的问题是,我通过登录接口吧数据存储型在session,我登录上以后,发现再次验证登录(另一个接口)的 ...
- node.js 关于跨域和传递给前台参数
/*为app添加中间件处理跨域请求*/ app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin& ...
- NodeJ node.js Koa2 跨域请求
Koa2 .3 跨域请求 Haisen's 需求分析 (localhost:8080 = 前端 [请求] localhost:8081 = 服务器 ) 1.一个前台 一个服务器 前台 ...
- js的跨域问题和解决办法
我们在开发中,经常会遇到跨域请求数据问题,那么什么是跨域呢?跨域就是js在不用域之间的数据传输或者通信,比如你在使用ajax从另外一个域请求数据,或者你的页面引入了iframe,要从iframe中获取 ...
- node.js设置跨域
app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*& ...
- js执行跨域请求
//js执行跨域请求 var _script = document.createElement('script'); _script.type = "text/javascript" ...
- js 跨域的问题 （同一个主域名不同的二级域名下的跨域问题） 解决 WdatePicker.js my97日期选择控件
例如域名是 a.xx.com 和 b.xx.com 如果一个页面中引入多个iframe,要想能够操作所有iframe,必须都得设置相同domain. 如果iframe的时候 a包含b 为 ...
- js调用跨域
web aapi 初体验 解决js调用跨域问题 跨域界定 常见跨域: 同IP不同端口: http:IP:8001/api/user http:IP:8002/api/user 不同IP不同 ...
- 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:/ ...
随机推荐
- pycharm版本下载地址
https://www.runoob.com/w3cnote/pycharm-windows-install.html 下载社区版本,因为免费 其余按照默认安装即可
- 通过 SCF Component 轻松构建 REST API，再也不用熬夜加班了
本教程将分享如何通过 Serverless SCF Component .云函数 SCF 及 API 网关组件,快速构建一个 REST API 并实现 GET/PUT 操作. 当一个应用需要对第三方提 ...
- centos最小化安装时网络配置
查看网卡: ip addr 修改网络配置文件 vi /etc/sysconfig/network-scripts/ifcfg-enp33 BOOTPROTO=dhcp ONBOOT=yes 重启网络服 ...
- 计算机网络基础：TCP和UDP
UDP(用户数据报协议) 应用场景:一个数据包就能完成数据通信:不需要建立会话和流量控制:多播.广播:是一种不可靠传输.(例如QQ聊天,屏幕广播) UDP协议特点: UDP是无连接的,即发送数据之前不 ...
- （5千字）由浅入深讲解动态规划(JS版)-钢条切割，最大公共子序列，最短编辑距离
斐波拉契数列 首先我们来看看斐波拉契数列,这是一个大家都很熟悉的数列: // f = [1, 1, 2, 3, 5, 8] f(1) = 1; f(2) = 1; f(n) = f(n-1) + f( ...
- 使用nginx构建一个具备缓存功能的反向代理服务器
上游服务一般不提供公网访问. upstream模块,名字叫local 这个时候访问,都是由反向代理服务处理返回的. 有了反向代理服务后,拿变量和值会出错,tcp是有对端地址的,反向代理与客户端是一个t ...
- linux入门系列10--firewalld防火墙管理
上一篇文章学习了用户及文件相关权限,本篇继续学习防火墙技术. 防火墙作为公网与内网之间的保护屏障,对系统至关重要.防火墙又分为硬件防火墙和软件防火墙,主要功能都是依据设置的策略对穿越防火墙的流量进行过 ...
- meta 的作用 搜集
Meta标签中的format-detection属性及含义 format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的forma ...
- shellcode 反汇编，模拟运行以及调试方法
onlinedisassembler https://onlinedisassembler.com 在线反汇编工具,类似于lda.功能比较单一. Any.run 等平台在线分析 将shellcode保 ...
- 数据算法 --hadoop/spark数据处理技巧 --（5.移动平均 6. 数据挖掘之购物篮分析MBA）
五.移动平均 多个连续周期的时间序列数据平均值(按相同时间间隔得到的观察值,如每小时一次或每天一次)称为移动平均.之所以称之为移动,是因为随着新的时间序列数据的到来,要不断重新计算这个平均值,由于会删 ...