Add documentation about <script crossorigin> for React CDN usage (#10368)
Dan Abramov committed
Aug 3, 2017 at 16:13 UTC
03ca99d9bafddbac9e0b9aec3a6fd4ad9b94d372
2 files changed
+18
-4
docs/docs/installation.md
+18
-4
@@ -218,21 +218,35 @@ Learn [how to tell if your website is serving the right version of React](/react
218
If you don't want to use npm to manage client packages, the `react` and `react-dom` npm packages also provide single-file distributions in `dist` folders, which are hosted on a CDN:
219
220
```html
221
-<script src="https://unpkg.com/react@15/dist/react.js"></script>
222
-<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
221
+<script crossorigin src="https://unpkg.com/react@15/dist/react.js"></script>
222
+<script crossorigin src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
223
```
224
225
The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available at:
226
227
```html
228
-<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
229
-<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
228
+<script crossorigin src="https://unpkg.com/react@15/dist/react.min.js"></script>
229
+<script crossorigin src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
230
```
231
232
To load a specific version of `react` and `react-dom`, replace `15` with the version number.
233
234
If you use Bower, React is available via the `react` package.
235
236
+#### Why the `crossorigin` Attribute?
237
+
238
+If you serve React from a CDN, we recommend to keep the [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) attribute set:
239
+
240
+```html
241
+<script crossorigin src="..."></script>
242
+```
243
+
244
+We also recommend to verify that the CDN you are using sets the `Access-Control-Allow-Origin: *` HTTP header:
245
+
246
+
247
+
248
+This enables better [error handling experience](/react/blog/2017/07/26/error-handling-in-react-16.html) in React 16 and later.
249
+
250
<script>
251
/**
252
* The code below is based on a snippet from React Native Getting Started page.
docs/img/docs/cdn-cors-header.png
Binary files /dev/null and b/docs/img/docs/cdn-cors-header.png differ