windows下开发时前端界面和后端(node.js)联调的方法------------nginx

博主分享个人博客网站开发中前后端联调的步骤。先准备好前后端程序并写好接口,接着下载安装Nginx,利用其反向代理原理解决博客登录cookie跨域问题,修改Nginx配置文件划分端口,启动Nginx,全局安装http - server运行程序,最后在浏览器验证成果。

博主最近忙碌着我的个人博客网站的开发,刚学习了前端和后端联调,make一下,以防忘记

第一步,你有一个后端程序,以及一个前端程序。接口什么的都要写好
第二步,下载nginx并安装 官网下载地址 安装教程(博客园大佬)

nginx有以下的功能

一,用于静态服务,负载均衡
二,反向代理

我们用到的是nginx反向代理的原理,因为博客网站的登录cookie不能跨域共享,所以要用nginx来解决。
反向代理原理如下图
在这里插入图片描述第三步:修改nginx的配置文件,分别给网站入口,html文件,node的server服务划分端口
一,打开nginx安装目录下conf文件夹下的nginx.conf
二,用管理员模式打开修改如下

worker_processes  1; 操作系统启动多少个工作进程运行Nginx
server {
        listen       8080; //设置监听的端口即主程序的入口
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        #location / {
        #    root   html;
        #    index  index.html index.htm;
        #}
		
		location / {
		proxy_pass http://localhost:8001; //根路由下的监听端口为8001 即web端
		}
		location /api/ {
		proxy_pass http://localhost:3000;//api路由下的监听端口是3000,即server端
		proxy_set_header Host $host;
		}

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

如下图
在这里插入图片描述设置完后启动nginx —— Windows下Nginx的启动、停止等命令

然后全局安装http-server来运行程序

cnpm i http-server -g

设置端口为8001

http-server -p

如下
在这里插入图片描述第三步:在浏览器中验证成果
如下
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值