diff --git a/errors/doc-crossorigin-deprecated.md b/errors/doc-crossorigin-deprecated.md
new file mode 100644
index 00000000..6a4c8913
--- /dev/null
+++ b/errors/doc-crossorigin-deprecated.md
@@ -0,0 +1,20 @@
+# `Head` or `NextScript` attribute `crossOrigin` is deprecated
+
+#### Why This Error Occurred
+
+This option has been moved to `next.config.js`.
+
+#### Possible Ways to Fix It
+
+Add the config option:
+
+```js
+// next.config.js
+module.exports = {
+ crossOrigin: 'anonymous'
+}
+```
+
+### Useful Links
+
+- [The issue this was reported in: #5674](https://github.com/zeit/next.js/issues/5674)
diff --git a/packages/next/README.md b/packages/next/README.md
index 3b1b6c84..485f8e32 100644
--- a/packages/next/README.md
+++ b/packages/next/README.md
@@ -1526,13 +1526,13 @@ module.exports = {
Note: Next.js will automatically use that prefix in the scripts it loads, but this has no effect whatsoever on `/static`. If you want to serve those assets over the CDN, you'll have to introduce the prefix yourself. One way of introducing a prefix that works inside your components and varies by environment is documented [in this example](https://github.com/zeit/next.js/tree/master/examples/with-universal-configuration).
-If your CDN is on a separate domain and you would like assets to be requested using a [CORS aware request](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) you can extend _document.js and specify the `crossOrigin` attribute on Head and NextScripts which is then used for all Next.js asset tags.
+If your CDN is on a separate domain and you would like assets to be requested using a [CORS aware request](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) you can set a config option for that.
+
```js
-
...
-
-
-
-
+// next.config.js
+module.exports = {
+ crossOrigin: 'anonymous'
+}
```
## Production deployment
diff --git a/packages/next/build/webpack-config.js b/packages/next/build/webpack-config.js
index 01fc3cfb..ed68e6d9 100644
--- a/packages/next/build/webpack-config.js
+++ b/packages/next/build/webpack-config.js
@@ -258,6 +258,7 @@ export default async function getBaseWebpackConfig (dir, {dev = false, isServer
// This saves chunks with the name given via `import()`
chunkFilename: isServer ? `${dev ? '[name]' : '[name].[contenthash]'}.js` : `static/chunks/${dev ? '[name]' : '[name].[contenthash]'}.js`,
strictModuleExceptionHandling: true,
+ crossOriginLoading: config.crossOrigin,
webassemblyModuleFilename: 'static/wasm/[modulehash].wasm'
},
performance: { hints: false },
@@ -327,6 +328,7 @@ export default async function getBaseWebpackConfig (dir, {dev = false, isServer
!dev && new webpack.HashedModuleIdsPlugin(),
// Removes server/client code by minifier
new webpack.DefinePlugin({
+ 'process.crossOrigin': JSON.stringify(config.crossOrigin),
'process.browser': JSON.stringify(!isServer)
}),
// This is used in client/dev-error-overlay/hot-dev-client.js to replace the dist directory
diff --git a/packages/next/client/page-loader.js b/packages/next/client/page-loader.js
index 0bf539b1..f6eb6e90 100644
--- a/packages/next/client/page-loader.js
+++ b/packages/next/client/page-loader.js
@@ -83,6 +83,7 @@ export default class PageLoader {
const script = document.createElement('script')
const url = `${this.assetPrefix}/_next/static/${encodeURIComponent(this.buildId)}/pages${scriptRoute}`
+ script.crossOrigin = process.crossOrigin
script.src = url
script.onerror = () => {
const error = new Error(`Error when loading route: ${route}`)
@@ -137,6 +138,7 @@ export default class PageLoader {
if (hasPreload) {
const link = document.createElement('link')
link.rel = 'preload'
+ link.crossOrigin = process.crossOrigin
link.href = `${this.assetPrefix}/_next/static/${encodeURIComponent(this.buildId)}/pages${scriptRoute}`
link.as = 'script'
document.head.appendChild(link)
diff --git a/packages/next/pages/_document.js b/packages/next/pages/_document.js
index 53fa9717..560c402f 100644
--- a/packages/next/pages/_document.js
+++ b/packages/next/pages/_document.js
@@ -61,7 +61,7 @@ export class Head extends Component {
nonce={this.props.nonce}
rel='stylesheet'
href={`${assetPrefix}/_next/${file}`}
- crossOrigin={this.props.crossOrigin}
+ crossOrigin={this.props.crossOrigin || process.crossOrigin}
/>
})
}
@@ -75,7 +75,7 @@ export class Head extends Component {
href={`${assetPrefix}/_next/${bundle.file}`}
as='script'
nonce={this.props.nonce}
- crossOrigin={this.props.crossOrigin}
+ crossOrigin={this.props.crossOrigin || process.crossOrigin}
/>
})
}
@@ -98,7 +98,7 @@ export class Head extends Component {
rel='preload'
href={`${assetPrefix}/_next/${file}`}
as='script'
- crossOrigin={this.props.crossOrigin}
+ crossOrigin={this.props.crossOrigin || process.crossOrigin}
/>
})
}
@@ -117,14 +117,15 @@ export class Head extends Component {
}
return child
})
+ if (this.props.crossOrigin) console.warn('Warning: `Head` attribute `crossOrigin` is deprecated. https://err.sh/next.js/doc-crossorigin-deprecated')
}
return
{children}
{head}
- {page !== '/_error' && }
-
-
+ {page !== '/_error' && }
+
+
{this.getPreloadDynamicChunks()}
{this.getPreloadMainLinks()}
{this.getCssLinks()}
@@ -164,7 +165,7 @@ export class NextScript extends Component {
key={bundle.file}
src={`${assetPrefix}/_next/${bundle.file}`}
nonce={this.props.nonce}
- crossOrigin={this.props.crossOrigin}
+ crossOrigin={this.props.crossOrigin || process.crossOrigin}
/>
})
}
@@ -186,7 +187,7 @@ export class NextScript extends Component {
src={`${assetPrefix}/_next/${file}`}
nonce={this.props.nonce}
async
- crossOrigin={this.props.crossOrigin}
+ crossOrigin={this.props.crossOrigin || process.crossOrigin}
/>
})
}
@@ -201,14 +202,18 @@ export class NextScript extends Component {
const { page, buildId } = __NEXT_DATA__
const pagePathname = getPagePathname(page)
+ if (process.env.NODE_ENV !== 'production') {
+ if (this.props.crossOrigin) console.warn('Warning: `NextScript` attribute `crossOrigin` is deprecated. https://err.sh/next.js/doc-crossorigin-deprecated')
+ }
+
return
- {devFiles ? devFiles.map((file) => ) : null}
- {staticMarkup ? null :