CÔNG NGHỆ THÔNG TIN >> BÀI VIẾT CHỌN LỌC

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 - 762

Trong 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)

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 requestContainerResponse response) {

//Cho phép tất cả các domain 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">&times;</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!

QUẢNG CÁO - TIẾP THỊ