Nay mình sẽ thực hiện một chức năng quan trọng trong Next.js. Đó là chúng ta cần xử lý Middleware , vậy middleware để làm gì? Chúng ta có thể hiểu như sau:
Middleware là có tác dụng xử lý các vấn đề, khi một yêu cầu nào đó cần chạy vào phần mềm của ta, thì cần phải đi qua thằng Middleware này trước tiên. Đi qua nó trước để làm gì? à đi qua nó để kiểm tra xem các thông tin người dùng có hợp lệ hay không, kiểm tra như: origin , cookie, pathname, hostname, header, ..... mà ta cho phép truy cập vào các router trong ứng dụng. Tùy vào ứng dụng mà ta cài đặt kiểm tra nhé
Nếu các bạn đã làm qua về Middleware trong Laravel, hay React, thì các bạn có thể hình dung được, nó cũng giống như vậy
VD :
Laravel : thì ta cần tạo Middleware để check Authentication của người dùng hoặc kiểm tra Role , Group, Permissions,...
React : ta thường dùng middleware trong các thư viện Redux, Redux-Toolkit, Redux-Saga,...
NextJS : mình tạo một file Middleware nằm cùng cấp với app , pages, hoặc bên trong src, Nó sẽ kiểm tra mọi tuyến đường đi qua ứng dụng
Okay, đầu tiền mình sẽ tạo một file middleware.ts cùng cấp với thư mục app
import { NextRequest, NextResponse } from "next/server";
const allow_origin_lists :string[] = process.env.NODE_ENV==='production'?['https://hoanguyenit.com','https://100daysofcode.hoanguyenit.com']:
['https://www.google.com','http://localhost:3000']
export default function middleware(request: NextRequest){
console.log("env",process.env.NODE_ENV);
console.log("Host",request.headers.get('host'))
console.log("Origin",request.headers.get('origin'));
console.log("Url",request.url)
console.log("Mehod:",request.method);
//Chúng ta kiểm tra các request tại đây
const origin: string | null = request.headers.get('origin')
const res = NextResponse.next()
const res_404 = new NextResponse(null,
{
status: 404,
statusText:"Bad request",
headers:{
'Content-Type':'text/plain'
}
})
console.log(allow_origin_lists);
if(origin && !allow_origin_lists.includes(origin)){
return res_404;
}
// add the CORS headers to the response
res.headers.append('Access-Control-Allow-Credentials', "true")
res.headers.append('Access-Control-Allow-Origin', origin)
res.headers.append('Access-Control-Allow-Methods', 'GET,DELETE,PATCH,POST,PUT')
res.headers.append(
'Access-Control-Allow-Headers',
'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
)
return res;
}
export const config = {
matcher:[ '/api/:path*']
}
Bạn nhìn đoạn code trên mình có dùng check các origin cho phép truy cập vào ứng dụng
Bên cạnh đó trong function middleware ta có thể kiểm tra các giá trị tham số như, method, origin, url, host. Các giá trị này rất cần thiết khi ta xác thực các yêu cầu người dùng đến từ đâu, website nào, phương thức cho phép
Access-Control-Allow-Credentials : phép trình duyệt gửi yêu cầu CORS với thông tin xác thực (như cookie hoặc một thông tin xác thực khác)
Access-Control-Allow-Origin : xác định nguồn gốc mà trình duyệt được phép gửi yêu cầu CORS đến
Access-Control-Allow-Methods : xác định các phương thức HTTP mà máy chủ chấp nhận từ các trình duyệt gửi yêu cầu CORS
Access-Control-Allow-Headers : xác định các tiêu đề HTTP tùy chọn mà trình duyệt có thể bao gồm trong yêu cầu CORS. Điều này quan trọng nếu bạn muốn cho phép trình duyệt gửi các tiêu đề tùy chỉnh khác. Trong trường hợp này, danh sách các tiêu đề được liệt kê, bao gồm X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version