NextJS: 03-04 Proxy requests to API server 🚀

[@thuannguyenuc8641]

comment này chỉ mang tính chất khoe... là vừa đăng ký fan cứng, nên có thể xem bài viết sớm nhất. p/s: anh Hậu hướng dẫn kỹ thuật rỏ ràng hay dễ hiểu... đáng đồng tiền bát gạo nhaaaaa. :)

[@EasyFrontend]

wohooo cảm ơn Thuận nhiều nhiều nhen hihi, welcome to fan cứng nhé Thuận 😊

[@dungnguyenhuu4566]

tại sao khúc 9:20 của em lại không được vậy anh? Trong khi em thử để dòng cuối thì khi get trên postman vẫn lọt vào case PATH - Match all here ạ

[@trungtrung2248]

Hay quá anh ơi, giờ biết thêm cách để giấu API server. Cảm ơn anh nhiều

[@EasyFrontend]

yayyy bất ngờ vẫn còn phía sau hihi, series xịn mịn Trung hen 😊

[@trungtrung2248]

@@EasyFrontend vâng ạ, à anh cho em hỏi phần code xóa cái cookie ở header req.headers.cookie='"", em comment đoạn code đó rồi vào phần header chỗ network để xem nó khác biệt như nào khi không comment đoạn code đó. Nhưng mà em vẫn k thấy khác biệt gì ạ, anh giải thích hộ em vs

[@EasyFrontend]

à khác biệt hay ko nó nằm trên phía API server á Trung. Nếu em ko xoá cookies thì khi debug trên API server em sẽ thấy request gửi lên có kèm theo cookies nữa. Còn nếu xoá rồi thì sẽ ko thấy em nhen. Phía client thì em ko biết gì hết, cũng ko thấy có gì đặc biệt hehe Khúc đó là phần giao tiếp giữa NextJS server và API server nha Trung

[@trungtrung2248]

@@EasyFrontend ồ hay quá anh, vậy thì theo anh xoá cookie hay k xoá thì sẽ có lợi hơn ạ?

[@EasyFrontend]

à nên xoá em nhen, tại cái đó nó ko hữu ích cho API server thì mình đưa lên đó cũng hk đc lợi ích gì hehe hơn nữa thông tin token mình đã chuyển từ cookie sang header authorization òi hehe nên xoá đi cho cái size của request nhỏ hơn đc chút xíu haha

[@ngocnhat6938]

mình có thể áp dụng kỹ thuật này với api graphql không ạ, nếu được mong anh hướng dẫn

[@luanpham8423]

Anh ơi. Kiểu giờ em muốn dùng cái body của req thì phải làm sao anh . Set bodyParser: false rồi thì body nó undefined:((( cứu e với

[@QuangTranThanh-fy4id]

07:56 Hi a Hậu, cho e hỏi khúc phía sau của api mà k trùng thì config như nào a nhỉ Ví dụ: - next: /api/students - server: domain/api-abc/students

[@EasyFrontend]

hi em, chỗ proxy, em override lại cái request url em nhen

[@QuangTranThanh-fy4id]

@@EasyFrontend e cũng có thử ghi đè rồi nhưng vẫn lỗi, a có thể chi tiết hơn giúp e chỗ này đc k ạ, tks a

[@buikiet5645]

anh ơi cho em hỏi: 1. Ở next js 13 dùng app router, vậy trong api thì nó chỉ sài hàm GET, POST,... k có hàm handler để cover mọi method thì mình phải tạo proxy như nào ạ? 2. Trong chức năng đăng nhập, tại sao mình k sử dụng luôn cookie mà phải set lại thành header ở trường authentication ạ? em cám ơn!

[@EasyFrontend]

hi Kiệt, anh chưa dùng next 13 nên cũng hk rõ lắm nhen 1. Nếu nó ko hỗ trợ 1 hàm cho tất cả method, thì em có thể viết 1 hàm rồi tái sử dụng cho tất cả methods nhen. 2. Cái này là do cơ chế anh setup như vậy hen, anh nhớ có video giải thích flow này á, em coi lại giúp anh nhen, khúc authentication, có giải thích từng bước hihi, hình như video đầu của chương này thì phải

[@tamle9544]

Dạ anh cho em hỏi là tại sao mình phải config biến môi trường ở local và server vậy ạ? Sao mình không để luôn target là URL của api vậy anh? Em không hiểu chỗ đó, mong anh giải đáp giúp em. Em cảm ơn anh!

[@EasyFrontend]

hi em, việc đặt biến môi trường sẽ giúp em dễ dàng thay đổi mà ko cần phải deploy lại code. Như trong video này anh có thể setup và thay đổi value của biến môi trường trực tiếp trên vercel mà ko cần thay đổi code em nhen hehe

[@StarKing18021995]

Hi a Hậu! a cho e hỏi chút E thường aply proxy để né lỗi CORS trình duyệt, không biết anh và mn có như vậy không? Và HTTP Proxy có sẵn trong API Middleware do Next.js cung cấp, mình có thể dùng Rewrites config trong file next.config.js, cái này e thấy đơn giản hơn nhiều so với phải thông qua thư viện (em cũng đã từng dùng thư viện - http-proxy-middleware và thấy kết quả tương tự), vậy không biết làm như thế có được không anh nhỷ, có vấn đề gì ở đây không? có nhất thiết phải dùng thư viện không? Khá nhiều câu hỏi, mong anh rep!

[@EasyFrontend]

hi em, 1. CORS - cái này em nên fix từ phía BE, chứ ko workaround từ FE nha. 2. Yeah nếu rewrites đáp ứng đủ nhu cầu của em rồi thì dùng nó em nha, ko cần cái http-proxy kia. Em chỉ dùng khi em muốn customize nhiều hơn và rewrite ko hỗ trợ được hen.

[@vannghia512]

a ơi cho e hỏi trong nextjs 14 thì mình tạo proxy thế nào vậy ạ

[@hungphamnang6480]

bác có cách nào chưa, t cũng đang vướng đoạn này

[@vannghia512]

@@hungphamnang6480 chưa ông, ông kiếm đc cách nào chỉ t luôn nhé :v

[@EasyFrontend]

hmm anh chưa thử với next 14 nên ko dám chắc lắm, em có thử cái Middleware hoặc Route Handlers bên next 14 chưa Nghĩa?

[@quangphatinh4640]

mình không dùng cấu trúc thư mục api như này, mà mình custom theo ý mình là : '/repositories/AccountRepository.tsx, rồi trong từng file repo đó mình có nhiều hàm, mỗi hàm mình dùng fetch gọi trực tiếp lên api server, thì có cách nào dùng proxy server như video không bạn ?

[@EasyFrontend]

à vậy bạn cứ proxy từng request một nhen Phát, bạn xem tiếp video tiếp theo để biết mình proxy cái request login thế nào nha. Nhưng mình ko hề recommend như vậy nhé 😉

[@kiet0987070899]

Cảm ơn các video hướng dẫn của anh. Cho em hỏi nếu mình dùng API route như này thì có bị ảnh hưởng performance của app không anh?

[@EasyFrontend]

à hiện tại thì a chưa thấy vấn đề em nhen hihi

[@kiet0987070899]

@@EasyFrontend anh ơi, cho em hỏi vd nếu cái đuôi API của em không trùng với đường dẫn api/products mà là /products thì mình sẽ set thế nào vậy anh?

[@EasyFrontend]

à nếu vậy thì em override lại cái request url nha Kiệt hehe req.url = req.url.replace(/^\/api/, '')

[@kiet0987070899]

@@EasyFrontend cảm ơn anh, em call được rồi. Xịn quá :v

[@lehuynhuc656]

@@kiet0987070899 alo b ơi cái req.url = req.url.replace(/^\/api/, '') bạn đặt ở đâu á cho mình xem ví dụ đc ko

[@thienvu4676]

Hi anh Hậu, Hình như call bằng Proxy requests giống như trong video bị lỗi rồi a ạ. E call nó toán báo api 404 not found (nếu call qua api proxy - còn call api server thì bthg). E có clone cả project của a về nó cũng bị thế ạ. Mong a xem qua ạ.

[@EasyFrontend]

hmm, anh thì vẫn chạy được bình thường, a nghĩ em thiếu file biến môi trường .env á Vũ

[@ptithiro7868]

@@EasyFrontend em muốn gọi thông qua proxy như kia thì có dùng được với hàm getserversideprops không ạ

[@hunghuy2156]

Nếu server e dùng là firebase thì có dùng next làm proxy tương tự như này không a Hậu nhỉ :D

[@EasyFrontend]

à theo anh nghĩ là vẫn được em nhen hihi 😊

[@TomsFarm]

Anh ơi, nếu login mà api trả về lỗi thì mình xử lý và hiển thị như nào nhỉ ?

[@EasyFrontend]

hi Quân, cái này tuỳ mong muốn của em nhen, chỗ login nó chỉ là call API, nên em cứ catch và handle tương ứng nhé. Ví dụ show lỗi rồi redirect về login page chẳng hạn hehe

[@vinhngo5201]

anh cho e hỏi, API e test trên postman ngon lành mà lúc lên vercel, gõ địa chỉ gọi api trên trình duyệt toàn ra lỗi 500 (Internal Server Error) thì là đang failed rồi hả a :((

[@EasyFrontend]

đúng òi em nhen, em check xem bên API của em nhen 😉

[@winterburn3010]

em cũng bị vậy

[@haptn]

Video chapters anh ơi: 00:00 Giới thiệu video 00:44 Giới thiệu http-proxy 02:50 Tạo file match all API routes 05:38 Setup http-proxy 10:03 Xử lý body parser trong proxy 13:12 Config biến môi trường ở local 14:35 Deploy & Config biến môi trường ở server 18:16 Sum up và giới thiệu video tiếp theo

[@EasyFrontend]

Yeah cảm ơn em nhiều nhiều nhé Hà Phạm ơi Số lượng video đã contribute chapter: 9 🎉

[@vinhle-dev]

mn sau khi deploy vercel mà test lỗi 500 thì thêm xfwd: true vào nhé proxy.web(req, res, { target: process.env.API_URL, changeOrigin: true, selfHandleResponse: false, xfwd: true })

[@EasyFrontend]

hi Vinh, cái này mình có link tới docs hay issue liên quan tới xfwd + vercel hk bạn hen?

[@nguyentruongthinh5282]

Hi anh Hậu, em có 2 câu hỏi về Proxy server này: 1. Liệu việc phải request thông qua proxy có ảnh hưởng đến performance của app so với ko forward ko anh? 2. Với những Web app ko viết bằng NextJS, ví dụ như ReactJS, NextJS thì có lẽ ko cần dùng đến Proxy mà call thẳng tới API server ạ? Em xin cảm ơn :D

[@EasyFrontend]

hi Thịnh, 1. Thông qua proxy, mình đừng có parse body, chỉ chuyển tiếp dạng streaming thì OK em nha, ko bị dính tới performance. Với thật ra thông thường server của mình và API server nó hay đc nằm chung hoặc gần nhau hehee. 2. Với reactjs thì mình cứ call thẳng tới server thôi em nhen, ko cần proxy nhé ❤️

[@NamNguyen-hv1el]

Tại sao lại phải xóa cookie ở 6:30 v ạ

[@EasyFrontend]

à tại API server của mình ko có handle cookies em nha API server cần truyền header auth lên nên mình xóa cookies đi, sau đó add header auth rồi mới fwd qua ông API server hen (cái này là do BE quy ước em nha, mỗi dự án khác nhau, ko giống nhau nha)

[@cuongtran-vv1hi]

forward phải từ này ko anh Hậu. Em nghe mà chưa hiểu lắm 😂😂😂

[@EasyFrontend]

đúng òi á em hehe

[@xuanthangle8207]

Rảnh ông ra khóa học hay video về microfrontend nha Hậu, thấy nước ngoài hay làm lắm mà VN ít tài liệu quá

[@EasyFrontend]

okie Thắng nhen, mình sẽ cân nhắc cho series tiếp theo 😊 tại mình cũng ko có nhiều kinh nghiệm mảng này, nên cũng muốn tìm hiểu rồi share lại cho mn luôn hehe

[@huynguyen5929]

Hiểu đơn giản thì next.js mặc định sử dụng body-parser để phân tích và sử dụng luồng yêu cầu, vì vậy http-proxy sẽ không thể đọc lại nó để gửi đến server api vì thế chúng ta cần tắt nó đi. Đúng không nhỉ a hậu :v

[@EasyFrontend]

yeah chính xác rồi Huy ơi 😊

[@cuongtt1407]

đây là anh sử dụng next làm backend à anh

[@EasyFrontend]

trong trường hợp này, anh đang tận dụng Next làm cái proxy để forward requests từ client lên API server thôi em nhen, chứ a ko làm cả phần backend (API + Database) trên Next server của mình em nhen

[@NguyenTrung-yn8tr]

Những API này giờ out of date rồi à anh Hậu

[@EasyFrontend]

à sao vậy em Trung, em làm gặp lỗi gì hở Trung?

[@NguyenTrung-yn8tr]

@@EasyFrontend ui sorry anh, e gõ nhầm URL

[@lenhattan46]

tuyệt vời :)))

[@duyanh710]

Proxy điểm yếu của nó là bị chậm, nên thấy nó load lâu thật ý

[@EasyFrontend]

yeah, nếu hk có nhu cầu thì em có thể khỏi dùng proxy cũng đc nhen, em có thể gọi API trực tiếp bên client luôn nha D.Anh