前后端交互之使用node.js与前端交互

小程序和Vue Axios一直是从本地拿的假数据，很没有逼格，今天把前后端搭了起来。直接从服务器拿数据，虽然也是假数据

前端代码入戏

 function sendAjax(url){
        return new Promise(resolve => {
            let xhr =new XMLHttpRequest()
            xhr.open('GET',url)
            xhr.onreadystatechange = function () {
                if (xhr.status==200&&xhr.readyState==4){
                    console.log(xhr.responseText)
                }
            }
            xhr.send()
        })
    }
    async function asy(url) {
       let res_1 =  await sendAjax(url)
        console.log(res_1)
    }
    asy('https://www.htmlstudio.top/')

这里我用的是async函数，然后用Promise封装的一个Ajax请求，没学过ES6的同学看不懂没有关系，我还有一个纯原生JavaScript版本的。

原生Ajax请求代码如下

            let xhr =new XMLHttpRequest()
            xhr.open('GET','https://www.htmlstudio.top/')
            xhr.onreadystatechange = function () {
                if (xhr.status==200&&xhr.readyState==4){
                    console.log(xhr.responseText)
                }
            }
            xhr.send()

后端是用node写的代码

贴上如下

const http = require('http');
const fs = require('fs')
const hostname = '127.0.0.1';
const port = 8124;

http.createServer((req, res) => {
    res.writeHead(200, {"Content-Type": "application/json",'Access-Control-Allow-Origin':'*'});
    let res_1 = fs.readFileSync('res_1.json')
    res.end(res_1)

}).listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

监听的是服务器的8124端口。

但是https的默认端口号众所周知是443.

没有关系，没有关系。nginx反向代理代码如下

 server {
        listen       443 ssl;
        server_name  www.htmlstudio.top;
	ssl_certificate      ssl/3490952_www.htmlstudio.top.pem;
	ssl_certificate_key  ssl/3490952_www.htmlstudio.top.key;
	ssl_session_timeout  5m;
	ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
	ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
	ssl_prefer_server_ciphers  on;
        location / {
	    proxy_pass http://127.0.0.1:8124;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

反向代理在nginx文件目录中的conf目录中。

last but not least。

我在node返回的响应头中设置了跨域资源共享。意思就是，任何人把上段ajax代码复制到JavaScript代码中打开页面都可以看到我返回的数据。