位置: IT常识 - 正文

【Node.js实战】一文带你开发博客项目之联调(导入HTML、Nginx反向代理、CORS解决跨域、与前端联调)(node.js教程详细)

编辑:rootadmin
【Node.js实战】一文带你开发博客项目之联调(导入HTML、Nginx反向代理、CORS解决跨域、与前端联调)

推荐整理分享【Node.js实战】一文带你开发博客项目之联调(导入HTML、Nginx反向代理、CORS解决跨域、与前端联调)(node.js教程详细),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:node.js详解,node.js教程详细,node.js基础入门,node.js gui,node js教程,node-js,node js教程,node js教程,内容如对您有帮助,希望把文章链接给更多的朋友!

个人简介

👀个人主页: 前端杂货铺 🙋‍♂️学习方向: 主攻前端方向,也会涉及到服务端 📃个人状态: 在校大学生一枚,已拿多个前端 offer(秋招) 🚀未来打算: 为中国的工业软件事业效力n年 🥇推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2&Vue3项目实战 🥝Node.js🍒Three.js 🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧

Node.js系列文章目录内容参考链接Node.js(一)初识 Node.jsNode.js(二)Node.js——开发博客项目之接口Node.js(三)Node.js——一文带你开发博客项目(使用假数据处理)Node.js(四)Node.js——开发博客项目之MySQL基础Node.js(五)Node.js——开发博客项目之API对接MySQLNode.js(六)Node.js——开发博客项目之登录(前置知识)Node.js(七)Node.js——开发博客项目之登录(对接完毕)文章目录Node.js系列文章目录项目演示一、前言二、解决跨域1、前端页面就绪2、开启新端口3、nginx 简介4、安装使用 Nginx5、nginx 命令6、nginx 配置三、与前端联调四、CORS 解决跨域五、写在最后项目演示

这是一个前后端分离的 myblog 博客项目,具体内容请观看如下视频~~

博客项目

一、前言

前面我们基本实现了登录的功能,并且各个接口也已基本配置完毕。

下面我们来进行对博客项目的联调工作,导入相应的 HTML,进行 Nginx 配置解决跨域 以及使用 CORS 解决跨域等操作。

二、解决跨域1、前端页面就绪

对于页面有需求的可以通过文章最下面的方式自行获取~~

首先我们新建一个文件夹(名为 html-test),里面存放我们的页面(.html 文件),文件内容如下:

页面呈现内容对应如下:

2、开启新端口

接下来,我们来开启一个新端口(前端端口)

首先在 html-test 文件目录下安装 http-server:

npm install http-server

安装成功之后,创建我们的新端口为 8001(注:8000 为后端端口,8001 为前端端口)

http-server -p 8001

但此时,前后端并不能互通,因为 8000 端口 和 8001 端口是有跨域的(8001 端口无法访问 8000 端口的 list 内容)…

3、nginx 简介

nginx 简介:

高性能的 web 服务器,开源免费一般用于做静态服务、负载均衡反向代理

4、安装使用 Nginx

Nginx 下载地址

大家可以下载这个比较稳定的版本

下载完成之后,我们打开这个 nginx.exe 文件(注意:会闪一下命令框,之后就消失了,但进程中已经开启了)

5、nginx 命令

简单介绍一下 nginx 的几个常用命令

测试配置文件格式是否正确 nginx -t启动 start nginx重启 nginx -s reload停止 nginx -s stop

我们打开命令行(win+r,之后cmd回车),输入 nginx -t 测试配置文件格式(successful => 很顺利~)

【Node.js实战】一文带你开发博客项目之联调(导入HTML、Nginx反向代理、CORS解决跨域、与前端联调)(node.js教程详细)

6、nginx 配置

我们使用编译器打开 conf 文件夹下的 nginx.conf

修改如下配置:

# server 的 listen 改为 8080 server { listen 8080; server_name localhost;# 注释掉这几行内容# location / {# root html;# index index.html index.htm;# }# 新增的内容(proxy_pass:代理,proxy_set_header Host $host; 配置负载均衡)location / {proxy_pass http://localhost:8001;}location /api/ {proxy_pass http://localhost:8000;proxy_set_header Host $host;}

之后我们保存,并在命令行输入 nginx -t 查看是否成功(successful => 很顺利~)

nginx -t

此时,我们打开 8080 端口网页

首页

详情页

作者页

三、与前端联调

为什么要进行联调?

登录功能依赖 cookie,必须用浏览器来联调cookie 跨域不共享,前端和 server 端必须同域需要用到 nignx 做代理,让后端端同域

接下来,修改一下 .router/blog.js 文件的内容

blog.js

我们设置一下管理员的判断,进行强制查询。之后把获取博客、新建博客、更新博客的返回值修改一下

// 获取博客列表 GET 请求if (method === 'GET' && req.path === '/api/blog/list') { // 博客的作者,req.query 用在 GET 请求中 let author = req.query.author || '' // 博客的关键字 const keyword = req.query.keyword || '' if (req.query.isadmin) { // 管理员界面 const loginCheckResult = loginCheck(req) if (loginCheckResult) { // 未登录 return loginCheckResult } // 强制查询自己的博客 author = req.session.username } // 查询的结果 const result = getList(author, keyword) return result.then(listData => { return new SuccessModel(listData) })}......// 修改获取博客详情、新建博客、更新博客里面的内容如下if (loginCheckResult) { return loginCheckResult}

联调结果如下:

myblog

四、CORS 解决跨域

除了使用 nginx 反向代理解决跨域,其实我们还可以使用 CORS 来解决跨越的问题

CORS 解决跨域简介

HTTP 协议的规范,现代浏览器都支持前端和服务端直接通讯,不用 nginx 做转发通过服务端设置 header 来实现

设置响应头(允许传入 cookie、允许网页来源、允许的请求类型)

Access-Control-Allow-CredentialsAccess-Control-Allow-OriginAccess-Control-Allow-Methods

创建 cros-http-test 文件夹,终端键入 npm init,初始化文件

npm init

具体文件目录如下:

app.js

在这里我们设置对应响应头,用来解决跨域

const http = require('http')const server = http.createServer((req, res) => { console.log('req url method: ', req.url, req.method) // 允许跨域传递参数 res.setHeader('Access-Control-Allow-Credentials', true) // 允许跨域的 origin,* 代表所有的(需谨慎使用) res.setHeader('Access-Control-Allow-Origin', '*') // 允许的 method (请求类型) res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE') res.writeHead(200, {'Content-Type': 'application/json'}) res.end( JSON.stringify({ errno: 0, msg: 'CORS nodejs' }) )})server.listen(8000)console.log('OK')

在终端运行 app.js

若不设置这三个响应头,则会出现跨域的报错(如果看到类似如下错误,则表示出现跨域辽…)

五、写在最后

至此,我们完成了HTML页面的导入,使用 nginx 解决了跨域的问题,并成功完成了与前端联调的工作。继续跟进学习吧!

后续会对该项目进行多次重构【多种框架(express,koa)和数据库(mysql,sequelize,mongodb)】

如果你需要该项目的 源码,请通过本篇文章最下面的方式 加入 进来~~

本文链接地址:https://www.jiuchutong.com/zhishi/299318.html 转载请保留说明!

上一篇:设计模式——单例模式(《设计模式》)

下一篇:【Web 安全】XSS 攻击详解(web安全什么意思)

  • 进口货物账务如何处理
  • 如何开具免税发票
  • 车辆购置税如何计算
  • 工地工贸药品入库流程
  • 土地摊销账务处理
  • 个人劳务费怎么交税
  • 自己开车差旅费报销流程怎么写
  • 个体户怎么网上报税流程
  • 非流动资产处置损失属于什么会计科目
  • 个人独资企业转个体户怎么办理
  • 银行理财产品的特点
  • 坏账准备期末应有余额怎么算
  • 买的厨房用品算什么费用
  • 社会保险基金管理局是干什么的
  • 金税盘在电脑上怎么打开
  • 税务局代开票流程是怎样的?
  • 小微企业企业所得税怎么征收2023
  • 跨地区经营建筑企业预缴企业所得税
  • 汽车发票抵扣联需要盖章吗
  • 涉税票据如何避免税务风险?
  • 小规模纳税人的认定标准是什么
  • 增值税发票税率怎么算
  • 开了红字发票销售方应怎么账务处理?
  • 经营租赁方式租入分录
  • 报考中级会计的工作证明
  • 小规模纳税人增值税专用发票税率
  • php框架基础教程
  • php表单的作用是什么
  • Symfony2实现在doctrine中内置数据的方法
  • 琼斯的大海怪
  • 房屋出租一定要签合同吗
  • deepwiser怎么用
  • ai生成图形
  • 消费积分如何做账
  • 个体户经营餐饮怎么申报
  • phpcms文档
  • python dict.item()方法遍历字典
  • vue前端页面设计
  • 存货资产减值损失借贷方向
  • 预收账款挂多久确认收入
  • 数据库用户名称
  • 应付职工薪酬余额方向
  • 以前年度差旅费退回
  • 商业汇票的承兑银行必须具备下列条件
  • 以前年度损益的科目代码
  • 计提工会经费如何划入工会专户
  • 城市生活垃圾处理费征收管理办法
  • 应付账款借方余额负数表示什么
  • 企业进项税额大于销项税额
  • 银行手续费发票未到怎样做账
  • 收银系统入库入错了怎么办
  • 停车费报账
  • 异地预缴增值税多交了怎么办,可以退吗
  • 营业外收入是否影响营业利润
  • 货款折扣的账务处理
  • 融资租入固定资产属于本企业资产
  • 买别人的银行卡是啥罪
  • sql server设置
  • mysql如何实现主从复制的具体流程
  • xp系统开机到window界面一直重启
  • 如何关闭京东白条
  • 简述linux系统有什么优点
  • unix和linux是使用较为广泛的多用户交互
  • centos hosts
  • windows10如何多选文件
  • mac终端输入代码有什么影响
  • nalntsrv.exe - nalntsrv是什么进程 有什么用
  • 电脑系统 win7
  • win8系统笔记本忘记开机密码怎么办
  • Unity-Shader Sublime 自制shader提示插件
  • Javascript WebSocket使用实例介绍(简明入门教程)
  • linux实现shell
  • 彻底弄懂js中的this指向
  • js处理时间格式
  • js校验密码复杂度
  • 印花税没有按时申报怎么办
  • 劳务派遣服务计税
  • 上海餐饮增值税
  • 交警认可的客货两用车型
  • 专票清单用什么纸打印
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设