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

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

项目演示

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

https://www.bilibili.com/video/BV1TW4y1V7Jz?t=32.0

博客项目

一、前言

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

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

二、解决跨域

1、前端页面就绪

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

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

bb7a79b16c0a4e4394bd9cda1af8544a.png

页面呈现内容对应如下:

bbf744bb8a704f98935b2c7f141e29bb.png

08d20fddc14f416ca3a3405c54c57bd7.png

09a9883560e045ff9a773e4289477504.png

1164e7997e764d8c89d13fa767b40ae6.png

b1845cc75c3a4cad9ec080d33641f724.png

4948ea1a73854fd882aaf38ed15e4e38.png

bf04943f06f8459c977223527faf7426.png

2、开启新端口

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

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

npm install http-server

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

http-server -p 8001

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

6ab78b58e9694afb910af8fd7ad2e107.png

3、nginx 简介

nginx 简介:

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

4、安装使用 Nginx

Nginx 下载地址

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

13d5a7caf22e4c70a1d21cf36675a3ef.png

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

4b74ac9e7b07459d8c4f04a79f6d91d2.png

5、nginx 命令

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


测试配置文件格式是否正确 nginx -t

启动 start nginx

重启 nginx -s reload

停止 nginx -s stop

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

be3a189eb3354423bce170b336f261a1.png

6、nginx 配置

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

676a444aac734702b9a42b46fc5bde9a.png

aa47718b21d745af9828daaa70b05e28.png

修改如下配置:

# 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

7f88650467b14e6cb49ccf00dfabbbeb.png

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

首页

815efe0465da42c38f2d86d633fd8f40.png

详情页

b1f61982563d4e0792d881b27add04cf.png

作者页

4f11173353fe4596b49979441ea4e873.png

三、与前端联调

为什么要进行联调?

  • 登录功能依赖 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
}

联调结果如下:

https://www.bilibili.com/video/BV16d4y1j7uE?t=1.1

myblog


四、CORS 解决跨域

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


CORS 解决跨域简介


HTTP 协议的规范,现代浏览器都支持

前端和服务端直接通讯,不用 nginx 做转发

通过服务端设置 header 来实现

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


Access-Control-Allow-Credentials

Access-Control-Allow-Origin

Access-Control-Allow-Methods

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

npm init

具体文件目录如下:

cb057d027f464485ad7544fcfcdd26af.png

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

90a8be7deb5241d8b24a550d4cd13b9e.png

e0116a9a9a1e4ef8a5ffc8c680e34880.png

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

933f00ba8fca4ba8839bf151f5178e65.png

五、写在最后

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


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


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

45fc82a82c6542bdb2ff4986377d8db3.png

相关文章
|
JSON 监控 前端开发
AMIS:百度开源的前端低代码神器,18.4k star 背后的开发效率提升利器
AMIS(前端低代码框架)是百度开源的低代码前端框架,基于纯 JSON 配置即可生成完整后台页面,包括表单、表格、图表、CRUD 列表,支持可视化拖拽编辑。,星标数已达 18.4k,百度内部已沉淀超过 5 万个页面,广泛应用于审核系统、数据管理后台、模型监控等落地场景
2009 0
|
人工智能 前端开发 JavaScript
前端工程化演进之路:从手工作坊到AI驱动的智能化开发
前端工程化演进之路:从手工作坊到AI驱动的智能化开发
1121 19
前端工程化演进之路:从手工作坊到AI驱动的智能化开发
|
12月前
|
安全 API PHP
PHP中实现CORS跨域资源共享的方法
通过这种方式,你可以在PHP应用中灵活地实现CORS,以支持跨域Web应用的需求。
780 15
|
存储 消息中间件 前端开发
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架,支持多端运行,结合PHP后端(如ThinkPHP/Laravel),实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互,后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据,RabbitMQ处理异步任务,优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理,确保高效稳定的用户体验。
913 4
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
|
JavaScript Unix Linux
nvm与node.js的安装指南
通过以上步骤,你可以在各种操作系统上成功安装NVM和Node.js,从而在不同的项目中灵活切换Node.js版本。这种灵活性对于管理不同项目的环境依赖而言是非常重要的。
4067 11
|
存储 JavaScript 搜索推荐
Node框架的安装和配置方法
安装 Node 框架是进行 Node 开发的第一步,通过正确的安装和配置,可以为后续的开发工作提供良好的基础。在安装过程中,需要仔细阅读相关文档和提示,遇到问题及时解决,以确保安装顺利完成。
1351 155
|
弹性计算 JavaScript 前端开发
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
Node.js 是一种高效的 JavaScript 运行环境,基于 Chrome V8 引擎,支持在服务器端运行 JavaScript 代码。本文介绍如何在阿里云上一键部署 Node.js 环境,无需繁琐配置,轻松上手。前提条件包括 ECS 实例运行中且操作系统为 CentOS、Ubuntu 等。功能特点为一键安装和稳定性好,支持常用 LTS 版本。安装步骤简单:登录阿里云控制台,选择扩展程序管理页面,安装 Node.js 扩展,选择实例和版本,等待创建完成并验证安装成功。通过阿里云的公共扩展,初学者和经验丰富的开发者都能快速进入开发状态,开启高效开发之旅。
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
16705 23
|
弹性计算 JavaScript 前端开发
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
1027 10
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
|
JavaScript 前端开发 数据可视化
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡
1224 2
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡