从HTML到node.js以及跨域问题的解决

废话不多说,直接上代码

网页客户端

 1 DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>clienttitle>
 6 head>
 7 <body>
 8     <button onclick="testClick()">点击button>
 9     <br>
10     <div id ="res_data">div>
11 <script src="http://code.jquery.com/jquery-latest.js">script>
12 <script type="text/javascript">
13     function testClick(){
14         var HTTPrequest = new XMLHttpRequest();
15         HTTPrequest.open("POST","http://192.168.3.151:8385/",true);
16         HTTPrequest.setRequestHeader("Content-Type","text/html; charset=utf-8");
17         HTTPrequest.withCredentials = true;
18         var msg = "this is a request";//新建一个字符串,通过send方法发送给服务器
19         HTTPrequest.send(msg);
20         HTTPrequest.onload = function (e){
21             $('#res_data').append("

"+ HTTPrequest.responseText +"

");//有返回信息时将信息打印在页面 22 } 23 HTTPrequest.onerror = function(e){ 24 alert('请求失败'); 25 } 26 } 27 script> 28 body> 29 html>

实际效果:

 

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

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

 1 var http = require('http');
 2 var PORT = 8385;
 3 http.createServer(function (req, res) {
 4     req.on('data', function(data) {
 5         console.log(data.toString());
 6     });
 7     res.setHeader("Access-Control-Allow-Credentials", "true");
 8     res.setHeader("Access-Control-Allow-Origin", "http://192.168.3.151:9000");
 9     res.setHeader("Access-Control-Allow-Headers", "Content-Type"); 
10     res.setHeader("content-type", "text/html; charset=utf-8");
11     var msg = "this is a response";
12     res.end(msg);
13 }).listen(PORT, function () {
14     console.log('server is listening on port ' + PORT);
15     })

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

现在运行这个node

 

 服务器就启动好了

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

 

 

 

 

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

你可能感兴趣的:(从HTML到node.js以及跨域问题的解决)