Enable CORS trong Restful Webservice(JAX-RS, Jersey) và Tạo ứng dụng Client sử dụng Ajax JQuery
Đăng lúc: 02:57 PM - 05/12/2023 bởi Charles Chung - 735Trong bài viết này tôi sẽ hướng dẫn các bạn Enable CORS trong ứng dụng Restful webservice và gọi Restful webservice sử dụng Ajax JQuery
CORS là gì?
CORS là viết tắt của “Cross-Origin Resource Sharing” (Chia sẻ tài nguyên giữa các nguồn gốc khác nhau) là một cơ chế bảo mật của trình duyệt web giúp ngăn chặn các trang web khác từ việc truy cập tài nguyên từ nguồn gốc khác nhau.
Khi một trang web cố gắng truy cập một tài nguyên từ nguồn khác ( ví dụ: trang web A truy cập tài nguyên từ trang web B), trình duyệt sẽ thực hiện một yêu cầu CORS để xác định liệu việc truy cập này có được phép hay không. Yêu cầu CORS bao gồm các tiêu đề HTTP đặc biệt và nếu trình duyệt của bạn xác định rằng truy cập này không được phép nó sẽ từ chối yêu cầu đó.
CORS giúp ngăn chặn các cuộc tấn công Cross-Site Request Forgery (CSRF), một loại tấn công mà kẻ tấn công cố gắng lợi dụng quyền truy cập của một người dùng đến một trang web khác mà họ đang đăng nhập.
Cấu hình CORS trong ứng dụng Restful Webservice (JAX-RS, Jersey)
- Trong phần này chúng ta sẽ sử dụng project của bài Tạo RESTful Web Service trong Java với Jersey và Oracle để cấu hình CORS nhé. Các bạn mở project ra, bổ sung thêm lớp sau vào gói bkap.filter
package bkap.filter;
import javax.ws.rs.ext.Provider;
import com.sun.jersey.spi.container.ContainerRequest;
import com.sun.jersey.spi.container.ContainerResponse;
import com.sun.jersey.spi.container.ContainerResponseFilter;
@Provider
public class CORSFilter implements ContainerResponseFilter {
@Override
public ContainerResponse filter(ContainerRequest request, ContainerResponse response) {
//Cho phép tất cả các domain có thể gọi
response.getHttpHeaders().add("Access-Control-Allow-Origin", "*");
//cho phép các thông tin đính kèm ở header
response.getHttpHeaders().add("Access-Control-Allow-Headers","CSRF-Token, X-Requested-By, Authorization, Content-Type");
//cho phép đình kèm thông tin người dùng
response.getHttpHeaders().add("Access-Control-Allow-Credentials", "true");
//cho phép các hành động
response.getHttpHeaders().add("Access-Control-Allow-Methods","GET, POST, PUT, DELETE, OPTIONS, HEAD");
return response;
}
}
- Mở tệp web.xml ra bổ sung thêm đoạn sau
<init-param>
<param-name>com.sun.jersey.spi.container.ContainerResponseFilters</param-name>
<param-value>bkap.filter.CORSFilter</param-value>
</init-param>
- Run ứng dụng nhé
Tạo ứng dụng Client gọi Restful Webservice sử dụng Ajax JQuery
Bước 1: Tạo thư mục ConsumeRestfulWebservice -> Open Folder trong Visual Code
Bước 2: Code cho tệp index.html theo gợi ý sau
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DANH SÁCH SINH VIÊN</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<H1>DANH SÁCH SINH VIÊN</H1>
<hr />
<button id="btnAdd" class="btn btn-primary">Thêm mới</button>
<table class="table table-bordered table-hover" id="tblStudent">
<thead>
<tr>
<th>Mã số</th>
<th>Họ và tên</th>
<th>Giới tính</th>
<th>Ngày sinh</th>
<th>Email</th>
<th>Điện thoại</th>
<th>Địa chỉ</th>
<th>Tình trạng</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="loading" style="margin:0 auto; width: 500px;display:none">
<img src="images/loading.gif" />
</div>
</div>
<div class="modal" id="modalAdd" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">THÊM MỚI SẢN PHẨM</h5>
<div id="action" style="display:none"></div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="productId">Mã số</label>
<input type="text" class="form-control" id="studentId">
</div>
<div class="form-group">
<label for="fullName">Tên</label>
<input type="text" class="form-control" id="fullName">
</div>
<div class="form-group">
<label for="gender">Giới tính</label>
<select size="1" class="form-control" id="gender">
<option value="1">Nam</option>
<option value="0">Nữ</option>
</select>
</div>
<div class="form-group">
<label for="birthday">Ngày sinh</label>
<input type="text" class="form-control" id="birthDay" />
</div>
<div class="form-group">
<label for="email">Điện thoại</label>
<input type="text" class="form-control" id="email" />
</div>
<div class="form-group">
<label for="phone">Điện thoại</label>
<input type="text" class="form-control" id="phone" />
</div>
<div class="form-group">
<label for="address">Địa chỉ</label>
<input type="text" class="form-control" id="address">
</div>
<div class="form-group">
<label for="active">Trạng thái</label>
<select size="1" class="form-control" id="active">
<option value="1">Hoạt động</option>
<option value="0">Dừng</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btnSave">Lưu</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Thoát</button>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.6.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
var domain = "http://localhost:8080/RestfulWebServiceJerseyOracle/api/students";
$(function () {
$('#loading').css("display", "block");
//xử lý đọc dữ liệu ra bảng
$.get(domain, function (data) {
var tr = "";
$.each(data, function (index, st) {
tr += '<tr id="S_' + st.studentId + '" ><td>' + st.studentId + '</td><td>' + st.fullName + '</td><td>' + (st.gender == 1 ? 'Nam' : 'Nữ') + '</td><td>' + st.birthDay + '</td><td>'
+ st.email + '</td><td>'
+ st.phone + '</td><td>'
+ st.address + '</td><td>'
+ (st.active == 1 ? 'Đang học' : 'Dừng') + '</td><td><a class="btn btn-info" href="#" onclick="editProduct(\'' + st.studentId + '\')">Sửa</a> <a class="btn btn-danger" href="#" onclick="deleteProduct(\'' + st.studentId + '\')">Xóa</a></td></tr>';
});
$('#tblStudent').append(tr);
$('#loading').css("display", "none");
});
//xử lý nút add
$('#btnAdd').click(function () {
$('#action').html('add');
$('#studentId').val('');
$('#fullName').val('');
$('#birthDay').val('');
$('#gender').val(1);
$('#address').val('');
$('#email').val('');
$('#phone').val('');
$('#active').val(1);
//hiển thị cửa sổ thêm mới
$('#modalAdd').modal('show');
});
//xử lý ghi dữ liệu
$('#btnSave').click(function () {
if ($('#action').html() == 'add') {
//gọi ajax
$.ajax({
url: domain,
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({
studentId: $('#studentId').val(),
fullName: $('#fullName').val(),
birthDay: $('#birthDay').val(),
gender: $('#gender').val(),
address: $('#address').val(),
email: $('#email').val(),
phone: $('#phone').val(),
active: $('#active').val(),
}),
success: function (data) {
alert(data.message);
$('#modalAdd').modal('hide');
window.location.reload();
},
error: function (msg) {
alert(msg);
}
});
} else {
$.ajax({
url: domain + "/" + $('#studentId').val(),
type: 'PUT',
contentType: 'application/json',
data: JSON.stringify({
studentId: $('#studentId').val(),
fullName: $('#fullName').val(),
birthDay: $('#birthDay').val(),
gender: $('#gender').val(),
address: $('#address').val(),
email: $('#email').val(),
phone: $('#phone').val(),
active: $('#active').val(),
}),
success: function (data) {
alert(data.message);
$('#modalAdd').modal('hide');
window.location.reload();
},
error: function (msg) {
alert(msg);
}
});
}
});
});
function deleteProduct(id) {
if (confirm('bạn có muốn xóa không?')) {
$.ajax({
url: domain + "/" + id,
type: 'DELETE',
success: function (data) {
alert(data.message);
$('#S_' + id).remove();
}, error: function (msg) {
alert(msg.statusText);
}
});
}
}
function editProduct(id) {
$('#action').html('edit');
$.get(domain + "/" + id, function (st) {
$('#studentId').val(st.studentId);
$('#fullName').val(st.fullName);
$('#birthDay').val(st.birthDay);
$('#gender').val(st.gender);
$('#address').val(st.address);
$('#email').val(st.email);
$('#phone').val(st.phone);
$('#active').val(st.active);
$('#modalAdd').modal('show');
});
}
</script>
</body>
</html>
Bước 3: Chuột phải vào tệp html và chọn Open with Live Server trong Visual Code để hưởng thành quả nhé các bạn
- Màn hình đang tải dữ liệu
- Màn hình hiển thị sinh viên
- Màn hình thêm
Video
Link tải source code
thay lời cảm ơn!
Các bài cũ hơn
- Tạo ứng dụng JSP-Servlet gọi Restful Webservice sử dụng thư viện Jersey Client (04:40 PM - 01/12/2023)
- Security trong Restful Webservice sử dụng Jersey 2 để sinh ra JWT (07:24 PM - 29/11/2023)
- Restful Webservice Upload file kèm dữ liệu JSON sử dụng Jersey trong Java và Oracle (09:47 AM - 27/11/2023)
- Tạo RESTful Web Service trong Java với Jersey và Oracle (10:41 AM - 24/11/2023)
- Phát triển ứng dụng RESTful Web Service trong Java với thư viện Jersey (12:52 PM - 22/11/2023)
