## 前言

Nodejs 提供了 http 能力，我们通过如下代码可以快速创建一个http server服务

```javascript
const http = require('http');

http
  .createServer((req, res) => {
    res.write('hello\n');
    res.end();
  })
  .listen(3000);
```

使用nodejs提供的原生能力启动一个http server并不麻烦，但是拓展额外的能力就比较麻烦，比如支持路由router,静态资源,页面模板等。

插件机制是目前非常流行的拓展能力的设计方式，Koa框架是基于插件机制封装出来的一个Node HTTP框架，我将简单记录一下Koa的插件机制以及丰富的插件。

## 快速启动

```javascript
// app.js
const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
  ctx.body = 'Hello World';
});

app.listen(9999,()=>{
    console.log('App start on port: 9999')
});
```

```json
// package.json
{
 "scripts": {
    "dev": "node app.js"
  }
}
```

## 中间件Middleware(洋葱模型)

> 通过 Koa.use 将中间件注册到 koa应用中,中间件可以注册N个
>
> 我们可以通过插件机制个性化功能，提供给别人复用

> 中间件格式 async (ctx,next)=>{}
>
> * ctx => context对象，包含request,response对象，我们可以通过ctx来处理自己的业务需求
> * next ，promise对象，可以通过await next()，让程序执行下一个中间件，执行完后再执行当前中间件next下面的逻辑

```javascript
const Koa = require('koa');

const app = new Koa();

app.use(async(ctx,next)=>{
  console.log('middleware one in')
  await next();
  console.log('middleware one out')
})

app.use(async(ctx,next)=>{
  console.log('middleware two in')
  await next();
  console.log('middleware two out')
})

app.use(async(ctx,next)=>{
  console.log('middleware three in')
  await next();
  console.log('middleware three out')
})

app.listen(9999, () => {
  console.log("app started! port:9999");
});
```

**运行结果**

```javascript
middleware one in
middleware two in
middleware three in
middleware three out
middleware two out
middleware one out
```

**中间件运行过程**

![](https://cdn.fmlg1688.cn/levenx-world/3692c7bc5dd74822bb9a39a4b96ad0b4.png)

## 常用中间件

### Koa Router

> 作为一个HTTP server,处理不同path的请求是最常见的问题，koa router就是专门处理路由分发的中间件

**主程序**

```javascript
const Koa = require('koa');
const Router = require('koa-router');

const app = new Koa();
const router = new Router();

router.get('/',async(ctx)=>{
  ctx.type = 'html';
  ctx.body = '<h1>hello world!</h1>';
})

app.use(router.routes());
app.use(router.allowedMethods())

app.listen(9999, () => {
  console.log("app started! port:9999");
});
```

**运行结果**

![](https://cdn.fmlg1688.cn/levenx-world/002419801abe4b33a269f997f6defb4d.png)

**属性简介**

Router实例上提供了http的多种请求方式 `get` `post` `put` `delete`等等。router的请求方法会接受两个参数，第一个参数是匹配的请求的路径 path,第二个参数是处理逻辑的函数。

Router的 routes，allowedMethods方法返回参数，是koa实例接受中间件格式。

# Koa View

> 页面渲染器，支持多种成熟的模版解析引擎。

```shell
npm add koa-view ejs
```

**主程序代码**

```javascript
//app.js
const Koa = require('koa');
const Router = require('koa-router');
const views = require('koa-views');

const app = new Koa();
const router = new Router();

app.use(views(__dirname + '/views', {
  map: {
    html: 'ejs'
  }
}))



router.get('/home',async(ctx)=>{
  await ctx.render('home',{words:'欢迎你'})
})

app.use(router.routes());
app.use(router.allowedMethods())

app.listen(9999, () => {
  console.log("app started! port:9999");
});
```

**html模版**

```html
// views/home.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乐闻世界</title>
</head>

<body>
    乐闻世界<%= words %>
</body>

</html>
```

**运行效果**

![](https://cdn.fmlg1688.cn/levenx-world/e68ad0a2e3ab4b8fa019ed03ccf510f8.png)

# Koa Static

> koa 支持静态资源的请求

**相关依赖**

```shell
yarn add koa-static
```

**主程序**

```javascript
const Koa = require('koa');
const static = require('koa-static');

const app = new Koa();

app.use(static(__dirname + '/statics'))

app.listen(9999, () => {
  console.log("app started! port:9999");
});
```

**运行效果**

![](https://cdn.portal.levenx.com/levenx-world/d1c72e69999e43b79eb4e2b287219216.png)


Nodejs提供了http能力，我们通过如下代码可以快速创建一个httpserver服务consthttp=require('http');http.createServer((req,res)=&gt;{res.write('hello\n');res.end();}).listen(3000);使用nodejs提供的原生能力启动一个httpserver并不麻烦，但是拓展额外的能力就比较麻烦，比

前端快速入门Koa.js 

## Koa 快速搭建 Web 服务

1. 创建项目文件夹，并系统终端切到文件夹

   ```bash
   npm init -y

   npm install koa
   ```

   ![koa 项目初始化](undefined)
2. 写一个最简单的web项目

   ```javascript
   //引入 koa
   const Koa = require("koa");

   //初始化一个 koa 实例
   const app = new Koa();

   //处理接口请求
   app.use(async (ctx, next) => {
       ctx.body = "levenx`s world"
   })


   app.listen(3000, () => {
       console.log("app started on port: 3000")
   })
   ```
3. 项目启动

   ```bash
   1. 命令行执行 node app.js
   或者
   2. npm run start
   ```

   **注：** npm run start 需要在package.json 中scripts字段中添加 "start":"node app.js"

   ![koa项目启动](undefined)
4. 请求效果

   > 浏览器中输入localhost:3000, 屏幕上展示服务器返回的信息 levenx`s world
   >

   ![请求效果图](undefined)

## 处理不同的路由

上面是最简单的一个服务实例，对于一个服务器来说，不可能说不管用户输入什么链接，服务器都返回相同的内容。那么接下来尝试处理不同的请求链接返回不同的内容。

![http://localhost:3000/home请求效果图](undefined)

![http://localhost:3000/levenx请求效果图](undefined)

代码做一下处理

```javascript
//引入 koa
const Koa = require("koa");

//初始化一个 koa 实例
const app = new Koa();

//处理接口请求
app.use(async (ctx, next) => {
    const path = ctx.path;
    switch (path) {
        //处理path为 /home
        case "/home":
            ctx.body = { path: "/home", content: "levenx`s world" }
            break;
        //处理path为 /levenx
        case "/levenx":
            ctx.body = { path: "/levenx", content: "levenx`s world" }
            break;
        default:
            ctx.body = "levenx`s world"
            break;
    }

})

app.listen(3000, () => {
    console.log("app started on port: 3000")
})
```

看一下处理好的效果

![localhost:3000/levenx效果图](undefined)

![localhost:3000/home效果图](undefined)


Koa快速搭建Web服务创建项目文件夹，并系统终端切到文件夹npminit-ynpminstallkoa写一个最简单的web项目```javascript//引入koaconstKoa=require('koa');//初始化一个koa实例constapp=newKoa();//处理接口请求app.use(async(ctx,next)={ctx.body='levenx`sworld'})app

 Koa 快速搭建 Web 服务

## 前言

在现代的 web 开发中，CORS（Cross-Origin Resource Sharing，跨源资源共享）是一个常见的问题。由于浏览器的同源策略限制，当我们尝试进行跨域请求时，例如从 `http://domain-a.com` 向 `http://domain-b.com` 发送 AJAX 请求，浏览器会拦截这些请求。幸运的是，Koa 这样的现代框架提供了优雅的解决方案。

在本教程中，我们将通过简单易懂的方式来掌握如何在 Koa 应用中处理 CORS 问题。

## 浏览器 CORS 工作流程

首先，我们需要理解 CORS 是如何工作的。简单来说，当你的前端应用尝试从不同源（协议 + 域名 + 端口）的服务器请求资源时，浏览器会基于安全考虑发起一个预检请求 (preflight request)，询问目标服务器是否愿意接受这个跨源请求。这个预检请求通常使用 `OPTIONS` 方法。如果服务器响应允许，浏览器才会发送实际的请求。

## 解决方式

在 Koa 应用中解决 CORS 问题通常有两个步骤：

1. **设置响应头：** 你需要适当设置 HTTP 响应头，比如 `Access-Control-Allow-Origin`，来告诉浏览器你的应用允许来自某个源的请求。
2. **处理预检请求：** 对于会引发预检的请求类型（如 `PUT`、`DELETE` 或含有自定义头的 `POST` 请求），你需要正确处理 `OPTIONS` 请求。

### 方式一、CORS 中间件

#### 1. 安装 Koa CORS 中间件

Koa 社区为我们提供了一个非常方便的中间件 `@koa/cors` 来简化 CORS 设置。首先，你需要安装这个中间件：

```sh
npm install @koa/cors
```

#### 2. 使用中间件设置 CORS

安装完成后，你可以在你的 Koa 应用中这样使用它：

```javascript
const Koa = require('koa');
const cors = require('@koa/cors');
const app = new Koa();

// 使用默认配置启用 CORS
app.use(cors());

// 或者自定义配置
// 例如，只允许来自 http://example.com 的跨源请求
app.use(cors({
  origin: 'http://example.com'
}));

// 其他中间件和路由
// ...

app.listen(3000);
```

### 方式二、自定义 CORS 响应头

如果你需要进一步自定义 CORS 行为，比如设置 `Access-Control-Allow-Methods` 或 `Access-Control-Allow-Headers`，你可以在 `cors()` 方法中传入更多选项：

```javascript
app.use(cors({
  origin: '*',
  allowMethods: ['GET', 'POST', 'DELETE'],
  allowHeaders: ['Content-Type', 'Authorization'],
}));
```

### 方式三、动态设置 CORS

在实际应用中，你可能需要根据不同的请求动态设置 CORS。`@koa/cors` 中间件也支持这样的操作，你可以传入一个函数来动态决定 `origin`：

```javascript
app.use(cors({
  origin: (ctx) => {
    if (ctx.url === '/test') {
      // 只有 /test 路径支持来自特定源的跨域请求
      return 'http://allowed-origin.com';
    }
    return 'http://default-origin.com';
  }
}));
```

## 方式四、手动设置 CORS

在没有使用 `@koa/cors` 的情况下，你可以通过设置 Koa 上下文（`ctx`）的响应头部来实现 CORS。这里是一个简单的例子：

```javascript
app.use(async (ctx, next) => {
  const allowedOrigins = ['http://allowed-origin.com', 'http://another-allowed-origin.com'];
  const origin = ctx.request.headers.origin;
  
  if (allowedOrigins.includes(origin)) {
    ctx.set('Access-Control-Allow-Origin', origin);
  }

  // 设置允许的方法
  ctx.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');

  // 如果你希望接收 cookies 或者允许一些特定的头部，则需要设置以下两个 Header
  ctx.set('Access-Control-Allow-Credentials', 'true');
  ctx.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');

  // 对于预检请求，我们只需要返回状态码 204 即可
  if (ctx.method === 'OPTIONS') {
    ctx.status = 204;
  } else {
    await next();
  }
});
```

这个自定义中间件检查了请求头部中的 `Origin`，并且只有在白名单中的源才被允许。它还为可能的预检请求设置了正确的处理方法。

## 注意事项

- 在设置 CORS 策略时，尽量避免使用 `origin: '*'`（允许所有源），除非你完全确定你的资源可以公开。
- 如果你需要处理带有敏感数据的请求，确保你配置了 `Access-Control-Allow-Credentials`，并且不要设置 `origin` 为 `'*'`，因为这样会导致浏览器忽略 `Access-Control-Allow-Credentials`。
- 在生产环境下，避免将 CORS 配置硬编码到代码中。最好是使用环境变量或配置文件来管理你的 CORS 白名单。

## 总结

通过本教程，你应该已经掌握了在 Koa 应用中处理 CORS 问题的基本方法和一些最佳实践。使用 `@koa/cors` 中间件，你可以非常轻松地对 CORS 进行配置，从而使得你的前端应用能够安全地与后端服务通信。

你还可以根据需要调整 CORS 策略，以找到安全与可用性的最,好的平衡点。另外，不要忘了定期回顾和测试你的 CORS 策略，确保它既符合业务需求，又不会无意中暴露敏感数据。

如果你的应用不允许使用第三方中间件，或者你想要深入了解 Koa 如何手动处理 CORS，你也可以通过编写自定义的中间件来实现。


在现代的web开发中，CORS（Cross-OriginResourceSharing，跨源资源共享）是一个常见的问题。由于浏览器的同源策略限制，当我们尝试进行跨域请求时，例如从http://domain-a.com向http://domain-b.com发送AJAX请求，浏览器会拦截这些请求。幸运的是，Koa这样的现代框架提供了优雅的解决方案。在本教程中，我们将通过简单易懂的方式来掌握如何在Ko

Koa.js 学习手册

教程简介

文章列表

前端快速入门Koa.js

Koa 快速搭建 Web 服务

Koa.js 如何处理 CORS 跨域问题