前言

在上篇文章中，我们实现了使用axios向后端发送请求，接下来需要做的就是在后端通过前端传递过来的数据进行判断。

全栈项目开发------NOTEBOOK(1)：前端Login.vue开发和Axios的二次封装 - 掘金 (juejin.cn)

一，后端

来到后端文件夹------server，开启我们的后端项目。

1. 初始化后端

js 复制代码

npm init -y

通过指令自动创建一个 package.json 文件，生成一些默认的项目设置。

2. 安装koa依赖

js 复制代码

 npm i koa

安装 Koa 框架，以便能够创建一个基本的 web 服务器

3. 安装 Koa-router 依赖

js 复制代码

npm i koa-router

安装 Koa-router为了更方便地管理路由

4. 创建 index.js 文件，使用 nodemon 监视

js 复制代码

npx nodemon .\index.js

使用nodemon启动服务器，它能自动监测index.js及相关文件变化，一旦修改并保存，即自动重启服务。这极大提升了开发效率，让你无需手动重启，专注编码与测试。

配置路由

运用koa和koa-router的依赖包对我们的页面路由进行配置是后端开发的基础，引入koa，并实例化他，

1. 路由配置：封装koa-router为router，为其添加路由前缀，接受前端传递过来的参数后抛出

1. 为什么添加路由前缀？
因为在login.vue文件中，前端通过 axios.post() 给后端输出的地址就是 '/user/login' ，加上默认地址，接口地址为http://localhost:3000/user/login 。通过router.prefix('/user') 使得我们可以通过 http://localhost:3000/login 访问login.vue页面。
1. 为什么ctx.request.body能接受前端传递过来的参数
因为服务器中间件（如Koa）解析了HTTP请求体（body），并将其内容转换为JavaScript对象或字符串，存储于ctx.request.body中，方便开发者访问。

router/user.js:

js 复制代码

const router = require('koa-router')()
// 添加路由前缀
router.prefix('/user')

router.post('/login', (ctx) => {
    // 获取前端传递过来的账号和密码，在数据库中校验
    const { username, password } = ctx.request.body
    console.log(username, password);
})
// 抛出封装的router
module.exports = router

2. 入口文件 ：引入全局的koa并实例化，引入封装后的router并使封装给router上的所有路径生效(使得其中的 '/login' 路径生效)。

index.js:

js 复制代码

const Koa = require('koa')
const app = new Koa()
const router = require('./router/user')

app.use(router.routes())

app.listen(3000, () => {
    console.log('项目已在后端启动');
})

二，跨域问题

配置好路由后，启动前端后端，进行登入操作。此时会报错

错误 has been blocked CORS policy------------当前端页面尝试从与其不同源的服务器请求资源时，浏览器的同源策略（Same-Origin Policy）阻止了这种跨域请求。CORS（跨源资源共享，Cross-Origin Resource Sharing）是一个安全功能。用于定义在浏览器和服务器之间如何安全地进行跨域请求。

同源机制/同源策略

同源机制（也叫同源策略）是浏览器中的一种重要安全机制，主要限制不同源的文档或脚本如何交互，以保护用户信息的安全。这里的"同源"指的是协议、域名和端口号三个要素必须完全相同。服务器间访问则不受同源策略限制，它们通常通过代码设置白名单或权限来控制访问。

前端在面临跨域问题时，虽然也有一些解决方案但是不够优雅。最佳实践是让后端（服务器端）来处理跨域请求。后端可以使用CORS（跨源资源共享）策略，通过配置响应头允许特定源的跨域访问。例如，在Koa框架中，可以使用@koa/cors中间件来轻松实现CORS配置。

解决跨域问题

@koa/cors 保护响应

在后端控制台下载@koa/cors依赖包,挂载使用

js 复制代码

npm i @koa/cors

js 复制代码

// 告诉浏览器不要破坏我的响应
const cors = require('@koa/cors')

app.use(cors())

再观察页面，发现跨域问题得到解决。但是使用koa/cors依赖包会带来一个新的问题��他读不懂POST传递过来的参数。

@koa/bodyparser 辅助解析参数

@koa/bodyparser是一个用于解析POST请求体数据的Koa中间件，它可以将请求体中的数据解析后存储到ctx.request.body中，方便后续中间件或路由处理函数使用。

安装这个依赖包，并使用

js 复制代码

npm i @koa/bodyparser

js 复制代码

// 辅助koa解析post传递的参数
const { bodyParser } = require('@koa/bodyparser')

app.use(bodyParser())

在用户登入页面输入值 1，1

观察node.js界面，用户输出的值成功给到后端，

恭喜，跨域问题成功解决！

小计

在这里我们清理一下思路，我们已经成功实现了前后端的交互，前端输入的参数能够成功给到后端，接下来我们需要做的是将用户输入的值与数据库中的数据进行比较，那么如何连接数据库呢？这就是我们接下来需要解决的问题

本期要点：koa ，koa-router ，nodemon ，router.prefix() ，CORS ，同源机制， @koa/cors ，@koa/bodyparser

全栈项目开发——NOTEBOOK(2)：后端基础配置和跨域问题

前言

一，后端

配置路由

二，跨域问题

同源机制/同源策略

解决跨域问题

@koa/cors 保护响应

@koa/bodyparser 辅助解析参数

小计