419 mã trạng thái laravel ajax

Gần đây, tôi bắt đầu tích hợp mẫu bootstrap với phần phụ trợ của Laravel. Và một điều làm tôi đau đầu rất nhiều đó là xác thực phụ trợ ajax.
Hai lỗi thường xảy ra khi bạn xử lý yêu cầu ajax với Laravel. 419 và 422.

Mã 419 tương ứng với sự vắng mặt của

const instance = axios.create[{
  headers: {
    'X-CSRF-TOKEN': $['meta[name="csrf-token"]'].attr['content'],
  },
}];

1

Để giải quyết vấn đề này, chỉ cần đặt nó vào

const instance = axios.create[{
  headers: {
    'X-CSRF-TOKEN': $['meta[name="csrf-token"]'].attr['content'],
  },
}];

2 của bạn

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Và chuyển nó với mọi yêu cầu bạn thực hiện với Laravel. [Đối với các tuyến đường trong tệp

const instance = axios.create[{
  headers: {
    'X-CSRF-TOKEN': $['meta[name="csrf-token"]'].attr['content'],
  },
}];

3]
Nếu bạn sử dụng axios, bạn có thể thêm nó vào cấu hình axios toàn cầu của mình.

axios.defaults.headers = {
  'X-CSRF-TOKEN': $['meta[name="csrf-token"]'].attr['content'],
},

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Hoặc chỉ định thời điểm bạn tạo một phiên bản axios

const instance = axios.create[{
  headers: {
    'X-CSRF-TOKEN': $['meta[name="csrf-token"]'].attr['content'],
  },
}];

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Còn về

const instance = axios.create[{
  headers: {
    'X-CSRF-TOKEN': $['meta[name="csrf-token"]'].attr['content'],
  },
}];

4 thì sao?

Lỗi này xảy ra khi quá trình xác thực phụ trợ của bạn không thành công.
Nếu bạn để Laravel làm mới trang của mình sau yêu cầu

axios.defaults.headers = {
  'X-CSRF-TOKEN': $['meta[name="csrf-token"]'].attr['content'],
},

0, bạn sẽ gặp lỗi trong chỉ thị và nội dung của

axios.defaults.headers = {
  'X-CSRF-TOKEN': $['meta[name="csrf-token"]'].attr['content'],
},

1, nhưng thông thường, bạn muốn xử lý nó qua ajax vì bạn quan tâm đến trải nghiệm người dùng hoặc bạn sử dụng . Hoặc thậm chí cả hai.

Đây là cách bạn có thể giải quyết vấn đề sau với axios

Giả sử bạn xác thực biểu mẫu của mình bằng các trường nhập email và mật khẩu

$request->validate[[
  'email' => 'required|min:4',
  'password' => 'required|min:9'
]];

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Vì axios là một thư viện dựa trên Lời hứa, nên bạn có thể bắt lỗi trong các khối

axios.defaults.headers = {
  'X-CSRF-TOKEN': $['meta[name="csrf-token"]'].attr['content'],
},

2. Tuy nhiên, vấn đề là ngay cả khi bạn thêm một khối catch sau

axios.defaults.headers = {
  'X-CSRF-TOKEN': $['meta[name="csrf-token"]'].attr['content'],
},

3,
thì nó cũng không giúp bạn lấy được thông tin về lỗi trong trình duyệt của mình. Khi bạn cố đăng nhập nó, bạn có thể nhận được một cái gì đó như thế này thay vì một json gọn gàng có lỗi.

May mắn thay, giải pháp rất đơn giản. Khi bạn truy cập dữ liệu lỗi, hãy sử dụng

axios.defaults.headers = {
  'X-CSRF-TOKEN': $['meta[name="csrf-token"]'].attr['content'],
},

4 thay vì

axios.defaults.headers = {
  'X-CSRF-TOKEN': $['meta[name="csrf-token"]'].attr['content'],
},

5 trong khối bắt của bạn, theo cách này

axios.defaults.headers = {
  'X-CSRF-TOKEN': $['meta[name="csrf-token"]'].attr['content'],
},

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Ở đây,

axios.defaults.headers = {
  'X-CSRF-TOKEN': $['meta[name="csrf-token"]'].attr['content'],
},

4 là một đối tượng có một số thuộc tính hữu ích như

axios.defaults.headers = {
  'X-CSRF-TOKEN': $['meta[name="csrf-token"]'].attr['content'],
},

7,

axios.defaults.headers = {
  'X-CSRF-TOKEN': $['meta[name="csrf-token"]'].attr['content'],
},

8 và

axios.defaults.headers = {
  'X-CSRF-TOKEN': $['meta[name="csrf-token"]'].attr['content'],
},

9. Cái sau là những gì chúng tôi đang tìm kiếm.
Ở đó, bạn có thể tìm thấy thuộc tính

const instance = axios.create[{
  headers: {
    'X-CSRF-TOKEN': $['meta[name="csrf-token"]'].attr['content'],
  },
}];

0 có mô tả chung và đối tượng

const instance = axios.create[{
  headers: {
    'X-CSRF-TOKEN': $['meta[name="csrf-token"]'].attr['content'],
  },
}];

1 có lỗi xác thực chi tiết.
Trong đối tượng

const instance = axios.create[{
  headers: {
    'X-CSRF-TOKEN': $['meta[name="csrf-token"]'].attr['content'],
  },
}];

2, khóa là tên đầu vào và giá trị là mảng [. ] của các chuỗi mô tả lỗi.

Bây giờ, hãy tiến thêm một bước và sử dụng một số tính năng ưa thích do axios cung cấp.
Axios cung cấp cho chúng tôi khả năng thêm các trình chặn vào các yêu cầu và phản hồi của chúng tôi. Nó cho phép chúng tôi sửa đổi các yêu cầu và phản hồi một cách nhất quán và tuân thủ nguyên tắc DRY.

Nếu bạn không quen thuộc với khái niệm đánh chặn, bạn có thể nghĩ về nó như sau

• Đối với các yêu cầu, họ sửa đổi dữ liệu yêu cầu của bạn trước khi gửi đến máy chủ,
• Đối với các câu trả lời, họ sửa đổi câu trả lời trước tất cả các khối

  axios.defaults.headers = {
    'X-CSRF-TOKEN': $['meta[name="csrf-token"]'].attr['content'],
  },
  

  3 và

  axios.defaults.headers = {
    'X-CSRF-TOKEN': $['meta[name="csrf-token"]'].attr['content'],
  },
  

  2 của bạn

Nếu bạn muốn tìm hiểu thêm, hãy xem tài liệu axios về chủ đề này

Sử dụng thiết bị chặn, chúng ta có thể thêm một lớp bổ sung

const instance = axios.create[{
  headers: {
    'X-CSRF-TOKEN': $['meta[name="csrf-token"]'].attr['content'],
  },
}];

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Lưu ý rằng chúng tôi đang chuyển tiếp cả phản hồi bình thường và lỗi

Và về cơ bản, đó là nó

Làm cách nào để sửa lỗi 419 trong laravel?

Trạng thái 419 trong laravel là gì?

Làm cách nào để ngăn trang 419 hết hạn trong laravel?

Ý nghĩa của trang 419 hết hạn là gì?