エクスプレスミドルウェア
Expressミドルウェアは本質的に機能処理機能です
const express = require('express')
const app = express();
app.get('/',function(req,res.next){
next()
})
注: ミドルウェア関数の仮パラメーター リストには次のパラメーターが含まれている必要がありますが、ルート処理関数には req パラメーターと res パラメーターしか含まれていません。
next() 関数は、複数のミドルウェアの連続呼び出しを実現するための鍵であり、フロー関係を次のミドルウェアまたはルートに転送することを意味します。
グローバルに効果的なミドルウェア:
app.use() で定義されたミドルウェア
ローカルで効果的なミドルウェア:
app.use() で定義されたミドルウェアは使用されません
複数の部分的なミドルウェアを定義:
//次の 2 つの書き方は「完全に同等」です。好みに合わせて使い分けてください app.get( '/' ,mw1,mw2, (req, res) => { res . send
( "ホームページ。") app.get('/',[mw1,mw2],(req,res) =>
{ res.send('ホームページ。"))
ミドルウェアに関する注意事項:
1. ルーティングの前に必ずミドルウェアを登録する
2. クライアントから送信されたリクエストは、複数のミドルウェアを呼び出して連続して処理することができる
3. ミドルウェアの業務コードを実行した後、次の関数を呼び出すことを忘れないでください
4. 順番にコードを防ぐために ロジックが混沌としているため、 next( 関数を呼び出した後に余分なコードを記述しないで、連続して呼び出す 5. 複数のミドルウェアを使用する場合、複数のミドルウェア間で req オブジェクトと res オブジェクトを共有する
ミドルウェアの分類:
-
ルーティングレベルのミドルウェア:
Express.Router() インスタンスにバインドされたミドルウェアは、ルーティングレベルのミドルウェアと呼ばれますvar app = express() var router = app.Router() router.use(function(req,res,next){ console.log('Time',Date.new()) next() }) app.use('/',router)
-
アプリケーション レベルのミドルウェア:
app.use() または app.get() または app.post() を介してアプリ インスタンスにバインドされたミドルウェアは、アプリケーション レベルのミドルウェアと呼ばれます。
//应用级别的中间件(全局中间件) app.use((req,res,next)=>{ next() }) //应用级别的中间件(局部中间件) app.get('/',nm,(req,res)=>{ res.send('home page') })
-
エラーレベルミドルウェア
エラーレベルミドルウェアの役割:プロジェクト全体で発生する異常なエラーをキャッチし、プロジェクトの異常な崩壊の問題を防ぐために特別に使用されます。
**形式:** エラーレベルミドルウェアの関数処理関数では、4 つの仮パラメータが必要であり、仮パラメータの順序は (err、req、res、next) です。app.get( ' /", function (req,res) { //路由 throw new Error("服务器内部发生了错误!')//抛出一个自定义的误 res.send( "Home Page") }) app.use(function (err, req,res,next){ //错汉极励的中问件 console.log( "发生了错误: ' +err.message) // 在服务器打印消息 res.send('Error! ' + err.message)//向客户靠家应错误相关的内容 })
注: エラーレベルのミドルウェアをすべてのルートの後に配置します
組み込みミドルウェアを表現する
express.static 次のような静的リソースを高速にホストする組み込みミドルウェア: HTML
ファイル、画像、CSS スタイルなど (互換性なし)
express.json は、JSON 形式のリクエスト ボディ データを解析します (互換性があり、
バージョン 4.16.0+ で利用可能)
express.urlencoded は、リクエスト本文データを URL エンコード形式で解析します (
互換性、バージョン 4.16.0 でのみ利用可能)
// application/json 形式のデータを解析するための組み込みミドルウェアを構成します app.use( express.json(o) //
application/x-www-form-urlencoded データを解析するための組み込みミドルウェアを構成します
app.use( express.urlencoded({ 拡張: false }
サードパーティのミドルウェア
Express が公式に組み込んでおらず、サードパーティが開発したミドルウェアをサードパーティミドルウェアと呼びます。プロジェクトでは、プロジェクトの開発効率を向上させるために、サードパーティのミドルウェアをオンデマンドでダウンロードして構成できます。
デモンストレーションの手順として、サードパーティのミドルウェアである body-parser を使用します。
npm install body-parser を実行してミドルウェアをインストールします
require を使用してミドルウェアをインポートする
app.use() を呼び出してミドルウェアを登録して使用する
カスタムミドルウェア
実装手順:
- ミドルウェアの定義
- req の data イベントをリッスンする
- req の終了イベントを聞く
- querystring モジュールを使用してリクエスト本文データを解析する
- 解析されたデータ オブジェクトを req.body としてマウントします
- カスタム ミドルウェアをモジュールとしてパッケージ化する
-
ミドルウェアの定義
app.use(function(req.res,next) { //中间件的业务逻辑 })
-
req の data イベントをリッスンする
//定义变量。用来存储名户读发送过来的请求体数据 let str = " " //监听req对象的 data 事件(客户读发试过来的新的清求体数购) req.on( ‘data' , (chunk)=>i //拼接请求体数据,转换为宁符串 str += chunk
-
req の終了イベントを聞く
//监听req对象的end 事件(请求体发送完毕后自动触发) req.on( " end",()=>{ //打印完整的请求体数据 console.log(str) //TOD0:把字符串格式的请求体数据,解析成对象格式 }
-
querystring モジュールを使用してリクエスト本文データを解析する
//导入处理querystring的 Node.js内置模块 const qs = require( " querystring " ) //调用qs.parse()方法,把查询字符串解析为对象 const body = qs.parse(str)
-
解析されたデータ オブジェクトを req.body としてマウントします
req.on( " end' , ()> { const body = qs.parse(str) // 调用qs.parse()方法,把查询字符串解断为对象 req.body = body //将解析出来的清求体对象。挂载为req.body属性 next() //最后,一定要调用next()函数,执行后续的业务逻辑 })
-
カスタム ミドルウェアをモジュールとしてパッケージ化する
書き込みインターフェイス
Express を使用してインターフェイスを作成する
1. サーバーを作成する
const express = require('express') const app = express() app.listen(80,()=>{ conlose.log('http://127.0.0.1') })
2. API ルーティング モジュールを作成する
// apiRouter.js【路由模块】 const express - require( " express ') const apiRouter = express.Routero // bind your router here.. . module.exports = apiRouter // app.js 【导入并注册路由模块】 const apiRouter = require( " ./apiRouter.js ") app.use( ' /api ' , apiRouter)
クロスドメインの問題を解決するには:
インターフェイスのクロスドメインの問題を解決するには、主に 2 つの解決策があります。
CORS (主流のソリューション、推奨)
JSONP (不完全なソリューション: GET 要求のみをサポート)
cors ミドルウェアを使用してクロスドメインの問題を解決します。
cors 是Express的一个第三方中间件。通过安装和配置cors中间件,可以很方便地解决跨域问题。使用步骤分为如下3步:
1.运行npm install cors安装中间件
2.使用const cors = require("cors')导入中间件
3在路由之前调用app.use(cors0)配置中间件
CORS クロスドメイン リソース共有
- CORS 応答ヘッダー -Access-Control-Allow-Origin
Access-Control-Allow- Originフィールドは応答ヘッダーで運ぶことができ、
その構文は次のとおりです。リソースへのアクセスを許可します。たとえば、次のフィールド値は http://itcast.cn からのリクエストのみを許可します:
res.setHeader( ' Access-Control-Allow-Origin" , "http:llitcast.cn')如果指定了Access-Control-Allow-Origin字段的值为通配符*,表示允许来自任何域的请求,示例代码如下: res.setHeader( ' Access-Control-Allow-Origin" , "*")
- アクセス制御許可ヘッダー
デフォルトでは、CORS は次の 9 つの要求ヘッダーをサーバーに送信するクライアントのみをサポートします:
Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width、Content-Type (値はtext/plain、multipart/form-data、application/x-www-form-urlencoded に限定されます)
クライアントが追加の要求ヘッダー情報をサーバーに送信する場合、Access-Control-Allow-Headers を渡す必要があります。
追加の要求ヘッダーを宣言します。そうしないと、今度はリクエストが失敗します!
//クライアントが追加の Content-Type リクエスト ヘッダーと X-Custom-Header リクエスト ヘッダーをサーバーに送信できるようにします //注; 英語の数字を使用して、複数のリクエスト ヘッダーを分割します 3 res.setHeader ( '
Access-Control-Allow-Headers'、'Content-Type'、'X-Custom-Header')
- アクセス制御許可メソッド
デフォルトでは、CORS はクライアントによる GET、POST、HEAD リクエストの開始のみをサポートします。
クライアントが PUT、DELETE などを通じてサーバーからリソースを要求する場合、サーバー側の Access-Control-Alow-Methods を通じて、実際の要求で許可されている
HITP メソッドを指定する必要があります。サンプル コードは次のとおりです。
//POST、GET、DELETE、HEAD リクエスト メソッドのみを許可する res.setHeader( "Access-Control-Allow-Methods',"POST、GET、DELETE、HEAD') //すべての HTTP リクエストを許可するメソッド
res .setHeader( " Access-control-Allow-Methods " , "*')
コアリクエスト
- 簡単なリクエスト
次の 2 つの条件を同時に満たすリクエストは単純なリクエストです。 リクエスト
メソッド: GET、POST、HEAD のいずれかの
HTTP ヘッダー情報が次のフィールドを超えない: カスタム ヘッダー フィールドなし、Accept、Accept-Language、Content- Language、DPR.Downlink、Save-Data、Viewport-Width、Width、Content-Type (application/x-www-form-urlencoded、multipart/form-data、text/plain の 3 つの値のみ
)
- プリフライト リクエスト
リクエストが次の条件のいずれかを満たす限り、プリフライト リクエストが必要です:
リクエスト メソッドが GET、POST、HEAD 以外である、リクエスト
メソッド タイプのリクエスト ヘッダーにカスタム ヘッダー フィールドが含まれている、
および application/json 形式のデータがブラウザがサーバーと
正式に通信する前に、ブラウザはまず、サーバーが実際のリクエストを許可するかどうかを知るために事前チェックの OPTION リクエストを送信するため、この OPTION リクエストは「事前チェック リクエスト」と呼ばれます。サーバーがプリフライト リクエストに正常に応答した後、実際のリクエストが実際のデータとともに送信されます。
単純なリクエストとプリフライト リクエストの違い:
単純なリクエストの特徴: クライアントとサーバー間で発生するリクエストは 1 つだけです。
プリフライト リクエストの特徴: クライアントとサーバーの間で 2 つのリクエストが発生し、実際のリクエストは OPTION プリフライト リクエストが成功した後にのみ開始されます。
JSONP インターフェース
コンセプト: ブラウザ側経由
特徴: 1. JSONP は XMLHttpRequest オブジェクトを使用しないため、実際の Ajax リクエストではありません。
2. JSONP は GET リクエストのみをサポートします。POST、PUT、DELETE などのリクエストはサポートされていません。
JSONP インターフェースの作成に関する注意事項:
プロジェクトで CORS クロスドメイン リソース共有が構成されている場合、競合を防ぐために、CORS ミドルウェアを構成する前に JSONP インターフェースを宣言する必要があります。それ以外の場合、JSONP インターフェイスは CORS が有効なインターフェイスとして処理されます。サンプルコードは次のとおりです。
//优先创建JsONP接口【[这个接口不会被处理成CORS接口】
app.get( " /api/jsonp ' . (req, res) =>{
})
//再配置CORS中问件【后续的所有接口,都会帔处理成CORS 接口】
app.use(cors())
//这是一个开启了CORS 的接口
sapp.get( " /api/get". (req. res) =>{
})
JSONP インターフェースを実装する手順:
1. クライアントから送信されたコールバック関数の名前を取得する
const functionName = req.query.callback
2. クライアントに送信するデータを JSONP 形式で取得する
3. 最初の 2 つのステップで得られたデータに従って、関数呼び出し文字列をつなぎ合わせる
4. 前の手順で取得した文字列を結合して、クライアントに応答します。