From 2f89ee4cd5c48f4076a29ea97ae7802dda640247 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Mon, 14 Aug 2017 14:00:10 -0700 Subject: [PATCH] Adding new page for cross-origin errors --- docs/cross-origin-errors.html | 415 ++++++++++++++++++++++++++++++++++ 1 file changed, 415 insertions(+) create mode 100644 docs/cross-origin-errors.html diff --git a/docs/cross-origin-errors.html b/docs/cross-origin-errors.html new file mode 100644 index 0000000000..d382c6b8a7 --- /dev/null +++ b/docs/cross-origin-errors.html @@ -0,0 +1,415 @@ + + + + + + + + + Cross-origin Errors - React + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + + React + +
+ + +
+
+
+ + +
+
+ Edit on GitHub +

+ Cross-origin Errors +

+
+ +
+

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, 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 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 attribute to your <script> tags:

+
<script crossorigin src="..."></script>
+
+

Also ensure the CDN responds with the Access-Control-Allow-Origin: * HTTP header:

+ +

Access-Control-Allow-Origin: *

+ +

Webpack

+ +

Some JavaScript bundlers may wrap the application code with eval statements in development. (For example Webpack will do this if 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.

+ + +
+ + +
+
+ +
+ + +
+

Quick Start

+ +
+ +
+

Advanced Guides

+ +
+ +
+

Reference

+ +
+ + + + +
+

Contributing

+ +
+ + +
+ +
+ + + + +
+ +
+ + + +