[MUSIC]
Đã hiểu một số chi tiết về cors trong bài giảng trước đó,
trong bài tập này chúng tôi sẽ sử dụng các cors Node Module và cấu hình máy chủ nhanh của chúng tôi.
Để cho phép các máy chủ để đáp ứng với các
tiêu đề liên quan đến cors thích hợp để yêu cầu đến từ trang web của khách hàng.
Để bắt đầu như bạn mong đợi, trước tiên chúng tôi sẽ cài đặt các cors Node Module.
Vì vậy, tại dấu nhắc, gõ npm install.
Hãy chắc chắn rằng bạn đang ở trong thư mục máy chủ Confect, và sau đó cors — lưu.
Và sau đó cài đặt mô-đun cors.
Và như bạn có thể thấy, trong khóa học này tôi đang sử dụng cors @2 .8.4.
Một khi bạn đã cài đặt mô-đun cors, chúng
ta hãy vào trình biên tập của chúng tôi và sau đó cấu hình máy chủ nhanh của chúng tôi.
Tới gặp biên tập viên của chúng tôi.
Bây giờ trong thư mục tuyến đường, bây giờ đó là nơi tôi sẽ chủ yếu áp dụng
Module cors bởi vì đó là nơi mà tất cả các tuyến đường khác nhau đang được phục vụ.
Vì vậy, trong thư mục route, tôi sẽ thêm vào một tập tin mới có tên cors.js.
Và sau đó trong tập tin này, chúng tôi sẽ cấu hình Module cors.
Bây giờ đây là cách của tôi để đặt tất cả các thông tin liên quan đến
cors trong một mô-đun nút dựa trên tập tin riêng biệt ở đây.
Vì vậy, tại dấu nhắc,
hãy để tôi thử const express =
require ('express').
Và chúng ta hãy nhận được,
Các mô-đun cors trong.
Const app = express (); và
sau đó chúng ta hãy nói một danh sách trắng của một mảng chuỗi.
Danh sách trắng chứa tất cả các nguồn gốc
mà máy chủ này sẵn sàng chấp nhận.
Bây giờ tôi sẽ bao gồm một vài trong số họ ở đây,
localhost:3000 và
sau đó, Local host 3443.
Và nếu bạn cần thêm nguồn gốc để được thêm vào danh sách trắng của bạn, bạn chỉ có thể thêm chúng
vào danh sách trắng của bạn bởi vì tôi rõ ràng cố gắng để cấu hình cors Module của tôi.
Vì vậy, ở đây, tôi sẽ khai báo
một hàm A ở đây,
Với yêu cầu và gọi lại được định nghĩa ở đây.
Và bên trong cái này tôi sẽ tìm ra những lựa chọn cors ở đây.
Vì vậy, tôi sẽ bắt đầu bằng cách nói corsoptions,
var corsoptions; và sau đó tôi sẽ
nói nếu (Whitelist.indexof (req.header ('Origin'-
))).
Vì vậy, bạn có thể thấy rằng ở đây chúng tôi đang xác định trong mã ở đây,
chúng tôi đang nói req.header.
Vì vậy, nếu tiêu đề yêu cầu đến chứa một nguồn cấp dữ liệu gốc,
sau đó chúng ta sẽ kiểm tra danh sách trắng này.
Tìm kiếm nguồn gốc cụ thể đó, nó có hiện diện trong danh sách trắng này không?
Vì vậy, đó là lý do tại sao chúng tôi đang nói Whitelist.indexof.
Vì vậy, đây là một hoạt động mảng được thực hiện ở đây.
Và chúng ta sẽ nói về nguồn gốc không bằng -1.
Như bạn đã biết chỉ số hoạt động sẽ trả về chỉ số lớn hơn hoặc
bằng 0 nếu điều này có mặt trong mảng này.
Nó sẽ trả về -1 nếu điều này không có trong mảng này.
Vì vậy, một cách rất nhanh chóng để kiểm tra xem nếu các
yêu cầu đến xuất xứ trong danh sách trắng.
Trong trường hợp đó, chúng ta sẽ nói
CorsOptions, CorsOptions.
CorsOptions = và đây là nơi tôi
sẽ chỉ định {origin: true}
Vì vậy, bằng cách nói {origin: true}, có nghĩa là
nguồn gốc ban đầu trong yêu cầu đến nằm trong danh sách trắng.
Vì vậy, tôi sẽ cho phép nó được chấp nhận.
Vì vậy, khi tôi thiết lập nguồn gốc là bằng đúng ở đây, sau đó cors Module của tôi sẽ
trả lời lại nói điều khiển truy cập cho phép nguồn gốc, và sau đó bao gồm nguồn gốc đó vào
các tiêu đề với điều khiển truy cập cho phép nguồn gốc chìa khóa có.
Vì vậy, theo cách đó phía khách hàng của tôi sẽ được thông báo nói rằng không sao cho
máy chủ chấp nhận yêu cầu này cho nguồn gốc cụ thể này.
Nếu không, vì vậy nếu đó không phải là trường hợp, vì vậy
nếu req.header của ('Origin') không nằm
trong danh sách trắng, sau đó bạn sẽ thấy CorsOptions.
{ origin: false}.
Vì vậy, khi bạn thiết lập nguồn gốc để false, sau đó bộ điều khiển truy cập
AlloWorigin sẽ không được trả lại bởi trang web máy chủ của tôi.
Và sau đó một khi chúng tôi đã làm điều
đó, sau đó chúng tôi sẽ nói callback (null, CorsOptions);.
Đó là nó. Vì vậy, bằng cách gọi chức năng này ở đây,
CorsoptionsDelegate ở đây, chúng tôi sẽ kiểm tra để xem nếu
yêu cầu đến thuộc về một trong những nguồn gốc danh sách trắng.
Nếu có, sau đó bạn trả lời lại với điều khiển truy cập
AlloWorigin với nguồn gốc của yêu cầu thiết lập trong đó.
Nếu không, nó sẽ không bao gồm điều khiển truy cập AlloWorigin khi trả lời.
Bây giờ, từ chức năng này, chúng tôi sẽ xuất khẩu cors như cors ở đây.
Bây giờ, nếu bạn cấu hình mô-đun cors bằng cách đơn giản nói cors
mà không có bất kỳ tùy chọn, sau đó điều đó có nghĩa là điều này sẽ trả lời
lại với điều khiển truy cập AlloWorigin với số tiền thẻ hoang dã.
Có một số quy tắc mà trên đó điều này là chấp nhận được để làm,
đặc biệt là bất cứ khi nào chúng tôi thực hiện các hoạt động get.
Không sao khi chấp nhận điều đó.
Nếu không, chúng tôi sẽ nói, CorsWithOptions = cors, và
sau đó chúng tôi sẽ cung cấp các) CorsOptionsDelegate)
chức năng mà chúng tôi vừa xác định trước đó.
Vì vậy, theo cách đó, nếu bạn cần áp dụng A cors
với các tùy chọn cụ thể cho một tuyến đường cụ thể, chúng tôi sẽ sử dụng chức năng này.
Nếu không, chúng tôi sẽ chỉ đơn giản là sử dụng cors tiêu chuẩn.
Bây giờ chúng ta đã xác định mã liên quan đến cors-code trong cors.js, chúng
ta hãy bắt đầu áp dụng điều này cho các tuyến đường khác nhau.
Vì vậy, chúng tôi sẽ bắt đầu với DishRouter.
Vì vậy, chúng ta hãy mở DishRouter, và
trong DishRouter, chúng ta sẽ đầu tiên
[NOUSE] nhập khẩu [NOUSE]. /cors.
Lưu ý rằng các tập tin cors.js là trong cùng một thư mục, vì vậy
chúng tôi chỉ có thể nhập nó bằng cách nói. /cors.js.
Mô-đun nút dựa trên tệp.
Bây giờ, cho yêu cầu GET, một khi chúng tôi đã nhập khẩu đó.
Bây giờ, đối với DishRouter, tôi sẽ thiết lập trường tùy chọn.
Vì vậy, như bạn đã thấy, bất cứ khi nào bạn cần phải preflight yêu cầu của bạn,
khách hàng đầu tiên sẽ gửi thông báo yêu cầu HTTP OPTIONS và sau đó có được
trả lời từ phía máy chủ trước khi nó thực sự gửi yêu cầu thực tế.
Vì vậy, đối với các tùy chọn, nếu thông báo tùy chọn được nhận trên tuyến đường cụ thể này,
sau đó chúng tôi sẽ trả lời như cors.CorsWithOptions, và,
Với chức năng gọi lại ở đây, trong đó nói,
res.sendStatus, 200.
Chúng ta không cần gửi bất cứ điều gì hơn là chỉ là tình trạng từ đây.
Và như vậy, khi một thông điệp tùy chọn được nhận,
khi điều này sẽ trả lời, chúng ta sẽ thấy kết quả gì khi chúng ta gửi một yêu cầu tùy chọn
từ phía khách hàng đến phía máy chủ trong một chuyến bay ngắn.
Bây giờ, tùy chọn này, tôi sẽ áp dụng cho mọi tuyến đường.
Vì vậy, cho DisHid, cho D
ishid/Bình luận, và cũng cho D
ishid/Bình luận bắt đầu, /:CommentID.
Vì vậy, tất cả các trường hợp, tôi sẽ áp dụng các tùy chọn tương tự ở đó.
Bây giờ, đi trở lại, cho
GET, tôi sẽ chỉ đơn giản là áp dụng cors.
Vì vậy, đối với yêu cầu GET, tôi sẽ nói, Cors.cors,
vì vậy lưu ý rằng đây là phần mềm trung gian đầu tiên mà chúng tôi sẽ áp dụng, và
sau đó nó sẽ chuyển sang tin nhắn này ở đây.
Vì vậy, các cors middleware được giới thiệu ở đó.
Đối với POST, họ sẽ áp dụng Cors.corsWithOptions.
Cùng một điều cho điều đó, PUT,
DELETE.
Điều tương tự cho POST, PUT, và
DELETE còn lại trên tất cả các tuyến đường khác ở đây.
Đối với GET, chúng tôi sẽ chỉ sử dụng cors,
vì vậy hãy để tôi chỉ áp dụng corsWithOptions để POST, PU
T, và DELETE trong tất cả các tuyến đường ở đây,
vì vậy POST, PUT, và DELETE.
Bây giờ, cho các hoạt động GET như chúng ta đã thấy cho
phiên bản của DishRouter tôi chỉ áp dụng cors.cors,
vì vậy tôi sẽ sao chép điều đó và sau đó áp dụng nó cho tất cả các GeT.
Vì vậy, cho GET này, sau đó cuộn xuống cho GET này, và
sau đó cũng cho cuối cùng, tôi cũng sẽ áp dụng cùng một tùy chọn.
Vì vậy, DishRouter của tôi bây giờ đã được cập nhật.
Bây giờ, tôi sẽ làm điều tương tự với Promorouter,
LeaderRouter, UploadRouter, và cũng là users.js.
Vì vậy, hãy mở LeaderRouter tiếp theo.
Trong LeaderRouter, điều đầu tiên tất nhiên là
bao gồm các mô-đun nút dựa trên tập tin cors, vì vậy
hãy để tôi sao chép điều đó và sau đó dán nó vào LeaderRouter.
Sau đó, các tùy chọn, tôi sẽ áp dụng cùng một điều để LeaderRouter cũng.
Vì vậy, đối với LeaderRouter, tôi sẽ áp dụng CorsWithOptions,
và sau đó cùng một điều với LeaderRouter hoặc LeaderID.
Bạn chỉ có hai tuyến đường ở đây, vì vậy tôi sẽ áp dụng các tùy chọn cho cả hai.
Đối với các hoạt động GET,
tôi cần phải áp dụng cors.cors, vì vậy sao chép điều này từ DishRouter.
GET này, Tôi sẽ áp dụng cùng một điều, và
sau đó cũng GET này, Tôi sẽ áp dụng cùng một điều.
Bây giờ, đối với POST, PUT và DELETE, như bạn đã thấy, chúng tôi sẽ áp dụng Cors.CorsWithOptions,
Đối với bài đăng,
sau đó PUT và DELETE.
Và điều tương tự cho POST, PUT, và
DELETE của LeaderID cũng.
Vì vậy, bây giờ LeaderRouter của tôi được cập nhật, chúng ta hãy đi đến Promorouter.
Và trong Promorouter cũng, chúng ta hãy bắt đầu ở dưới cùng ở đây cho
DELETE, CorsWithOptions, PUT, POST.
Sau đó, để DELETE này, PUT, POST.
Và đối với GET, tất nhiên,
cors.cors theo GET này và GET khác xuống dưới đây.
Và sau đó, chúng ta hãy nhập cors đó,
vì vậy sao chép điều này từ LeaderRouter của tôi.
Sau đó, chúng tôi nhập cors ở đây, và sau đó các tùy chọn.
Vì vậy, tôi sẽ sao chép các tùy chọn từ đây và
sau đó đi vào Promorouter, tôi sẽ áp dụng các tùy chọn ở đây.
Và cũng cho Promorouter khác, các tùy chọn tương tự.
Bây giờ, UploadRouter.
Vì vậy, đi vào UploadRouter, một lần nữa
, nhập khẩu, Cres,
Sau đó, cho uploadRouter.route, cho
phép tôi áp dụng các tùy chọn ở đó.
Và đối với GET,
chúng ta sẽ nói cors.cors.
POST sẽ là Cors.CorsWithOptions.
Tương tự cho, PUT.
Và xóa, vì vậy bộ định tuyến tải lên của tôi được cập nhật.
Người cuối cùng là người dùng.
Vì vậy, trong người dùng, hãy để tôi,
Nhập xe ô tô, Và
sau đó, trong trường hợp này bởi vì chúng tôi đang làm router.get, router.post, và như vậy.
Vì vậy, đối với mỗi người trong số họ, tôi sẽ đi vào và áp dụng rõ ràng,
carsWithOptions, ngay cả đối với GET ở đây.
Bởi vì GET được thực hiện bởi quản trị viên ở đây,
không có người dùng nào khác có thể được phép thực hiện điều đó.
Nhưng đăng ký, cũng CarsWithOptions cho
đăng nhập cũng tôi sẽ áp dụng, Đó là nó.
Hãy lưu tất cả các thay đổi vì vậy
chúng tôi có cập nhật tất cả các tuyến đường khác nhau để sử dụng ô tô.
Bây giờ chúng ta hãy đi và khởi động máy chủ của chúng tôi và sau đó xem chiếc xe này giúp chúng tôi như thế nào.
Đi đến thiết bị đầu cuối,
hãy để tôi bắt đầu trang web máy chủ ở đây.
Và khi máy chủ được khởi động, chúng
ta hãy vào Postman của chúng tôi và sau đó gửi một yêu cầu GET.
Vì vậy, khi bạn gửi một yêu cầu GET cho một localhost:3000dishes,
bạn sẽ ngay lập tức nhận được một phản hồi từ phía máy chủ.
Tất nhiên ngay bây giờ cơ sở dữ liệu của tôi là trống rỗng vì vậy tôi nhận được một mảng trống ở đây, nhưng chúng
ta hãy đặc biệt nhìn vào các tiêu đề bởi vì đó là nơi mà
điểm quan tâm cho chúng tôi là trong bài tập này.
Vì vậy, trong đây, bạn có thể thấy rằng chúng tôi có một tiêu đề bổ sung
ở đây gọi là Access-Control-Allow-Origin.
Vì vậy, Access-Control-Allow-Origin như bạn thấy cung cấp chiếc xe hoang dã,
đó là ngôi sao ở đây.
Vì vậy, có nghĩa là, bất kỳ nguồn gốc để truy cập tài nguyên cụ thể này,
vì vậy máy chủ nói rằng okay, bất kỳ nguồn gốc sẽ được phép truy cập tài nguyên này.
Đối với yêu cầu GET chúng tôi hài lòng với điều đó.
Bây giờ chúng ta hãy đăng nhập vào hệ thống, và
sau đó một khi chúng ta có được mã thông báo, hãy để tôi sao chép mã thông báo ở đây.
Và sau đó chúng tôi sẽ thực hiện một thao tác xóa trên trang web máy chủ của chúng tôi.
Vì vậy, chúng tôi sẽ xóa các món ăn ở đây, vì vậy
hãy để tôi bao gồm, Mã thông báo vào tiêu đề ủy quyền ở đây.
Và cũng lưu ý rằng đối với thao tác xóa, tôi đang thiết lập nguồn gốc.
Vì vậy, một lĩnh vực khác ở đây gọi là nguồn gốc để localhost:3343 đây.
Vì vậy, chỉ ra rằng thao tác xóa này thực sự
đang cố gắng để xóa tại nguồn gốc cụ thể này ở đây.
Và vì vậy khi chúng tôi thực hiện thao tác này như vậy, nếu bạn đang làm điều này từ một trình duyệt,
nguồn gốc sẽ được tự động thiết lập bởi trình duyệt
dựa trên trang web mà từ đó yêu cầu bắt nguồn.
Nhưng ở đây, vì chúng ta đang sử dụng Postman, tôi phải thiết lập rõ ràng nguồn gốc ở đây.
Vì vậy, hãy để tôi gửi yêu cầu với trường nguồn gốc này thiết lập ở đây.
Và sau đó bạn sẽ nhận thấy rằng trường tiêu đề bây giờ chứa
Access-Control-Allow-Origin với localhost:3443 được chỉ định ở đây.
Và như bạn sẽ nhận thấy rằng nguồn gốc này nằm trong danh sách trắng.
Vì vậy, đó là lý do tại sao Access-Control-Allow-Origin này được đặt
thành cùng một nguồn gốc mà chúng tôi đã chỉ định ở đó.
Nếu bạn chỉ định một nguồn gốc khác nhau ví dụ,
nếu bạn chỉ định, Nói localhost:2000 ví dụ.
Bạn sẽ nhận thấy rằng điều này sẽ không có, trong câu trả lời đến từ máy chủ,
điều này sẽ không có Access-Control-Allow-Origin đặt ở đây.
Bởi vì, địa chỉ cụ thể này không nằm trong danh sách trắng trên trang web máy chủ.
Bây giờ hãy xem một ví dụ về preflighting một yêu cầu.
Vì vậy, để làm điều đó, trong Postman, chọn Tùy chọn ở đây,
và sau đó chúng ta hãy gửi một yêu cầu preflighting
đến localhost: 3443dishes.
Và trong tiêu đề chúng tôi sẽ,
Đặt nguồn gốc như :localhost3443.
Và sau đó điều này gửi yêu cầu này đến máy chủ.
Và để trả lời yêu cầu tùy chọn này mà bạn đã gửi đến máy chủ,
bạn sẽ nhận thấy rằng trong thư trả lời chúng tôi sẽ nói 204 Không có Nội dung.
Không có nội dung nào được trả lại ở đây.
Tuy nhiên, khi bạn nhìn vào tiêu đề của thư trả lời đi kèm, hãy chú ý rằng
chúng tôi có Access-Control-Allow-Origin để được đặt giá trị đó.
Cũng lưu ý rằng nó đặt các phương pháp Access-Control-Allow.
Và ở đây nó chỉ định những phương pháp mà máy chủ sẽ
sẵn sàng chấp nhận tại điểm kết thúc này.
Vì vậy, do đó bạn đang thông báo cho khách hàng nói rằng,
tất cả các phương pháp này được chấp nhận cho máy chủ tại điểm kết thúc tương ứng.
Vì vậy, đây là cách chúng ta có thể làm preflighting của một yêu cầu.
Bằng cách gửi các tùy chọn yêu cầu tin nhắn đầu tiên, và
sau đó lấy lại thông tin từ máy chủ ở đây.
Và như bạn nhớ lại, đây là những gì chúng tôi cấu hình trong
phần tùy chọn của mỗi điểm kết thúc của bộ định tuyến.
Vì vậy, đây là cách chúng ta có thể cấu hình mô-đun nút ô tô của chúng tôi và
sau đó cấu hình máy chủ của chúng tôi để đáp ứng với các thông điệp tiêu đề khác nhau.
Với điều này, chúng tôi hoàn thành bài tập này.
Trong bài tập này, chúng ta đã thấy làm thế nào chúng ta có thể cấu hình máy chủ của chúng tôi để có thể gửi
lại các tiêu đề liên quan đến khóa học khác nhau trong thông điệp trả lời
bằng cách sử dụng mô-đun nút khóa học.
Với điều này, chúng tôi hoàn thành bài tập này.
Đây là thời điểm tốt để bạn thực hiện một bình luận GIT với khóa học tin nhắn.
[ NHẠC]