From fdcbf35abfc60f9cc31347e7c73534361a3c893c Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Mon, 14 Aug 2017 13:43:24 -0700 Subject: [PATCH] Added "Advanced Guides" page about cross-origin Errros (#10457) --- docs/cross-origin-errors.md | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 docs/cross-origin-errors.md diff --git a/docs/cross-origin-errors.md b/docs/cross-origin-errors.md new file mode 100644 index 00000000..a6b2d78a --- /dev/null +++ b/docs/cross-origin-errors.md @@ -0,0 +1,33 @@ +--- +id: cross-origin-errors +title: Cross-origin Errors +permalink: docs/cross-origin-errors.html +--- + +> Note: +> +> The following section applies only to the development mode of React. Error handling in production mode is done with regular try/catch statements. + +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. + +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. + +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. + +### CDN + +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 ` +``` + +Also ensure the CDN responds with the `Access-Control-Allow-Origin: *` HTTP header: + +![Access-Control-Allow-Origin: *](/react/img/docs/cdn-cors-header.png) + +### Webpack + +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. + +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