|
1 | 1 | ---
|
2 | 2 | id: cross-origin-errors
|
3 |
| -title: Cross-origin Errors |
| 3 | +title: Lỗi Cross-origin |
4 | 4 | permalink: docs/cross-origin-errors.html
|
5 | 5 | ---
|
6 | 6 |
|
7 |
| -> Note: |
| 7 | +> Ghi chú: |
8 | 8 | >
|
9 |
| -> The following section applies only to the development mode of React. Error handling in production mode is done with regular try/catch statements. |
| 9 | +> Bài này chỉ áp dụng trong chế độ phát triển của React. Xử lý lỗi trong chế độ sản phẩm (production mode) được thực hiện với các câu lệnh try/catch. |
10 | 10 |
|
11 |
| -In [development mode](/docs/optimizing-performance.html), React uses a global `error` event handler to preserve the "pause on exceptions" behavior of browser DevTools. It also logs errors to the developer console. |
| 11 | +Trong [chế độ phát triển](/docs/optimizing-performance.html), React sử dụng trình xử lý sự kiện `error` toàn cục để duy trình hành vi "pause on exceptions" ("Tạm dừng khi xảy ra ngoại lệ") của công cụ phát triển của trình duyệt. Nó cũng ghi lại lỗi vào bảng điều khiển dành cho nhà phát triển. |
12 | 12 |
|
13 |
| -If an error is thrown from a [different origin](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) the browser will mask its details and React will not be able to log the original error message. This is a security precaution taken by browsers to avoid leaking sensitive information. |
| 13 | +Nếu có một lỗi được đưa ra từ một [nguồn khác](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) trình duyệt sẽ che đi các chi tiết của nó và React sẽ không thể ghi lại thông báo lỗi gốc. Đây là biện pháp phòng ngừa bảo mật được thực hiện bởi trình duyệt nhằm tránh rò rỉ thông tin nhạy cảm. |
14 | 14 |
|
15 |
| -You can simplify the development/debugging process by ensuring that errors are thrown with a same-origin policy. Below are some common causes of cross-origin errors and ways to address them. |
| 15 | +Bạn có thể đơn giản hóa quy trình phát triển/gỡ lỗi bằng cách đảm bảo rằng các lỗi được đưa ra với cùng một nguồn. Dưới đây là một số nguyên nhân phổ biến gây ra lỗi có nguồn gốc khác nhau và cách giải quyết chúng. |
16 | 16 |
|
17 | 17 | ### CDN {#cdn}
|
18 | 18 |
|
19 |
| -When loading React (or other libraries that might throw errors) from a CDN, add the [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) attribute to your `<script>` tags: |
| 19 | +Khi tải React (hoặc các thư viện khác có thể gây ra lỗi) từ một CDN (mạng phân phối nội dung), hãy thêm thuộc tính [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) vào trong thẻ `<script>` của bạn: |
20 | 20 |
|
21 | 21 | ```html
|
22 | 22 | <script crossorigin src="..."></script>
|
23 | 23 | ```
|
24 | 24 |
|
25 |
| -Also ensure the CDN responds with the `Access-Control-Allow-Origin: *` HTTP header: |
| 25 | +Đồng thời chắc chắn rằng CDN phản hồi với một HTTP header `Access-Control-Allow-Origin: *`: |
26 | 26 |
|
27 | 27 | 
|
28 | 28 |
|
29 | 29 | ### Webpack {#webpack}
|
30 | 30 |
|
31 | 31 | #### Source maps {#source-maps}
|
32 | 32 |
|
33 |
| -Some JavaScript bundlers may wrap the application code with `eval` statements in development. (For example Webpack will do this if [`devtool`](https://webpack.js.org/configuration/devtool/) is set to any value containing the word "eval".) This may cause errors to be treated as cross-origin. |
| 33 | +Một số công cụ đóng gói Javascript có thể bọc mã ứng dụng bằng các câu lệnh `eval` trong quá trình phát triển. (Ví dụ: Webpack sẽ thực hiện việc này nếu [`devtool`](https://webpack.js.org/configuration/devtool/) được thiết lập từ bất kỳ giá trị nào có chưa từ khóa "eval".) Điều này có thể khiến các lỗi được coi là có nguồn gốc chéo nhau. |
34 | 34 |
|
35 |
| -If you use Webpack, we recommend using the `cheap-module-source-map` setting in development to avoid this problem. |
| 35 | +Nếu bạn sử dụng Webpack, chúng tôi khuyên bạn nên sử dụng cài đặt `cheap-module-source-map` trong quá trình phát triển để tránh vấn đề này. |
36 | 36 |
|
37 |
| -#### Code splitting {#code-splitting} |
| 37 | +#### Tách code {#code-splitting} |
38 | 38 |
|
39 |
| -If your application is split into multiple bundles, these bundles may be loaded using JSONP. This may cause errors thrown in the code of these bundles to be treated as cross-origin. |
| 39 | +Nếu ứng dụng của bạn được chia thành nhiều gói, các gói này có thể được tải bằng JSONP. Điều này có thể gây ra lỗi được đưa ra trong code của các gói này sẽ được coi là có nguồn gốc chéo nhau. |
40 | 40 |
|
41 |
| -To resolve this, use the [`crossOriginLoading`](https://webpack.js.org/configuration/output/#output-crossoriginloading) setting in development to add the `crossorigin` attribute to the `<script>` tags generated for the JSONP requests. |
| 41 | +Để giải quyết vấn đề này, sử dụng cài đặt [`crossOriginLoading`](https://webpack.js.org/configuration/output/#output-crossoriginloading) trong khi phát triển để thêm thuộc tính `crossorigin` vào thẻ `<script>` được tạo ra bởi JSONP request. |
0 commit comments