Hướng dẫn CORS ReactJS - Làm thế nào để sử dụng CORS ReactJS

CORS ReactJs là gì?

CORS là viết tắt của cross-origin resource sharing. Cũng giống như HTTPS, nó là một giao thức xác định một số quy tắc để chia sẻ tài nguyên từ một nguồn khác. Chúng tôi biết rằng các ứng dụng web hiện đại bao gồm hai thành phần chính: máy khách và máy chủ. Máy khách yêu cầu một số dữ liệu từ máy chủ và máy chủ sẽ gửi lại dữ liệu dưới dạng phản hồi.

Kiến trúc này ngày càng phổ biến vì nó cho phép back end của bạn được sử dụng độc lập trên nhiều ứng dụng khách như ứng dụng web, GUI trên máy tính để bàn hoặc ứng dụng gốc.

>>> Đọc thêm: Proptypes trong ReactJS - Khám phá mọi điều về Proptypes

Chính sách cùng nguồn gốc

Vì máy khách và máy chủ là các ứng dụng riêng biệt, chúng thường được lưu trữ trên các miền khác nhau. Do đó, ứng dụng khách yêu cầu dữ liệu từ máy chủ của riêng bạn có thể có nguồn gốc khác nhau. Trong một trường hợp khác, bạn có thể sử dụng một số dịch vụ của bên thứ ba để xác thực, phân tích, v.v. Điểm mấu chốt là tại một thời điểm nào đó, bạn sẽ tương tác với một ứng dụng có nguồn gốc khác với ứng dụng của bạn. Điều này có nghĩa là bạn sẽ yêu cầu tài nguyên từ ứng dụng bằng cách thực hiện một yêu cầu HTTP.

Khi bạn yêu cầu tài nguyên từ một ứng dụng có nguồn gốc khác, trình duyệt web sử dụng giao thức SOP (chính sách nguồn gốc) để chặn tất cả các yêu cầu của bạn đến nguồn gốc đó. Ngày trước, đây là điều đã làm cho Internet trở nên an toàn! Ví dụ: một kẻ bẻ khóa hoặc tin tặc độc hại từ xyz.com sẽ không thể truy cập thông tin của bạn trên abcbank.com. Tuy nhiên, quy tắc bảo mật cơ bản này điều chỉnh các trình duyệt không cho phép bạn yêu cầu tài nguyên từ một nguồn khác. Đó là một trường hợp sử dụng phổ biến được sử dụng rộng rãi trên các ứng dụng web ngày nay. Vậy giải pháp là gì?

>>> Đọc thêm: Khám phá điểm khác biệt giữa Reactjs và React Native

Cách nhập CORS ReactJS

CORS cho phép bạn truy cập tài nguyên từ một nguồn khác. Nó được sử dụng để ghi đè hành vi mặc định của trình duyệt của bạn do SOP. Vì vậy, bây giờ khi khách hàng của bạn yêu cầu một tài nguyên, phản hồi cũng sẽ chứa một con dấu thông báo cho trình duyệt của bạn cho phép chia sẻ tài nguyên trên các nguồn khác nhau.

Sau khi trình duyệt của bạn xác định được dấu này, các phản hồi cho các yêu cầu từ các nguồn gốc khác nhau sẽ được phép chuyển qua.

Tạo máy chủ Express với điểm cuối API

Để kích hoạt CORS, bạn cần tạo 

• Máy khách có thể yêu cầu tài nguyên từ máy chủ

• Máy chủ có một số điểm cuối có thể gửi phản hồi trở lại máy khách

Không cần phải nói, cả máy khách và máy chủ phải chạy trên các miền khác nhau hoặc có nguồn gốc khác nhau. Chúng ta có thể sử dụng React để tạo một máy khách đơn giản yêu cầu tài nguyên từ máy chủ. Tuy nhiên, trước tiên chúng ta cần một máy chủ có thể phục vụ như một điểm cuối mà máy khách có thể yêu cầu tài nguyên từ đó. 

Hãy tạo một máy chủ đơn giản bằng Express với một số điểm cuối API. Bên trong thư mục bạn chọn, hãy chạy lệnh sau:

Bây giờ bạn sẽ có một thư mục trống có tên cors-server . Hãy khởi tạo một dự án npm mới bên trong nó bằng cách chạy 

Bây giờ bạn sẽ có một tệp package.json bên trong dự án. Tuyệt vời! Hãy cài đặt Express , một khung NodeJS nhẹ để tạo các ứng dụng web. 

Tiếp theo, tạo tệp app.js bên trong thư mục gốc và thêm mã sau vào đó:

const express = require('express')

const app = express()

app.get('/', (req, res) => { res.send('Welcome to CORS server 

}) app.get('/cors', (req, res) => { res.send('This has CORS enabled 

}) app.listen(8080, 

=> { console.log('listening on port 8080') })

Trong đoạn mã trên, chúng tôi đã tạo một máy chủ tối thiểu bằng cách sử dụng Express lắng nghe trên cổng 8080. T3H có hai tuyến, / và / cors gửi phản hồi.

Hãy chạy máy chủ của chúng ta bằng lệnh sau:

CORS ReactJS nên được xử lý từ phía máy chủ

Chúng ta hãy xem xét kỹ hơn lỗi CORS ở trên.

Access to fetch at 'http://localhost:8080/' from origin 'http://localhost:3000'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is
present on the requested resource. If an opaque response serves your needs,
set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Nó nói rằng có một tiêu đề Access-Control-Allow-Origin  bị thiếu trên tài nguyên bạn yêu cầu. Nếu bạn nghĩ về nó, khách hàng của bạn không liên quan gì đến CORS. Đó chỉ là thứ mà trình duyệt của bạn áp đặt và nó gợi ý rằng tài nguyên được yêu cầu của bạn nên được định cấu hình theo cách khác. 

Do đó, nên cấu hình phản hồi từ máy chủ theo cách mà trình duyệt xác định đây là một yêu cầu CORS. Do đó, về mặt logic, CORS luôn phải được xử lý từ phía máy chủ . Sau đó, chúng ta sẽ khám phá một cách để giải quyết vấn đề này ở phía máy khách, nhưng giải pháp đáng tin cậy nhất là luôn tạo phản hồi từ máy chủ thân thiện với CORS.

Bật CORS Reactjs ở phía máy chủ

Hãy quay lại tệp app.js của máy chủ của chúng tôi . 

app.get('/cors', (req, res) => {
res.set('Access-Control-Allow-Origin', '*');
res.send({ "msg": "This has CORS enabled 🎈" })
})

Bên trong lệnh gọi lại phần mềm trung gian yêu cầu, trước tiên tôi đặt tiêu đề Access-Control-Allow-Origin  thành dấu hoa thị. Dấu hoa thị cho biết rằng tài nguyên này có thể được yêu cầu bởi bất kỳ khách hàng nào. Hãy cũng thay đổi điểm cuối trong ứng dụng React của chúng tôi. 

const response = await fetch('http://localhost:8080/cors', { mode: 'cors' });

app.get('/cors', (req, res) => {
res.set('Access-Control-Allow-Origin', 'http://localhost:3000');
res.send({ "msg": "This has CORS enabled 🎈" })
})