Added "Advanced Guides" page about cross-origin Errros (#10457)
Brian Vaughn committed
Aug 14, 2017 at 13:43 UTC
b4a3e3b34594759c90aef1694d2166b2d1126fa1
1 file changed
+33
docs/docs/cross-origin-errors.md
new
+33
@@ -0,0 +1,33 @@
1
+---
2
+id: cross-origin-errors
3
+title: Cross-origin Errors
4
+permalink: docs/cross-origin-errors.html
5
+---
6
+
7
+> Note:
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.
10
+
11
+In [development mode](https://facebook.github.io/react/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.
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.
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.
16
+
17
+### CDN
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:
20
+
21
+```html
22
+<script crossorigin src="..."></script>
23
+```
24
+
25
+Also ensure the CDN responds with the `Access-Control-Allow-Origin: *` HTTP header:
26
+
27
+
28
+
29
+### Webpack
30
+
31
+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.
32
+
33
+If you use Webpack, we recommend using the `cheap-module-source-map` setting in development to avoid this problem.
\ No newline at end of file