Nuxt项目给script标签添加crossorigin属性
Nuxt项目给script标签添加crossorigin属性
最近给项目添加一个错误日志上报的功能，由于使用的是第三方的服务，导致上报的错误信息都是Script error.。文档上写的很清楚，要处理这个问题只需要两步：添加“crossorigin="anonymous" 属性和添加跨域 HTTP 响应头。那么Nuxt项目该如何添加crossorigin呢？
给单页应用添加crossorigin
单页应用意味着nuxt.config.js中mode的值是spa。spa添加crossorigin很简单，官方文档上也有说明，只要在nuxt.config.js文件中的build属性下添加crossorigin: 'anonymous'就可以了。你可以运行npm run build，然后查看项目根目录下的.nuxt/dist/server/index.spa.html文件，其中script标签是有crossorigin属性的。
给同构应用添加crossorigin
同构应用（即使用了服务端渲染）意味着nuxt.config.js中mode的值是universal。此时再用上面的方法发现上述的.nuxt/dist/server/index.spa.html文件是加了crossorigin属性的，但是服务端渲染的文件.nuxt/dist/server/index.ssr.html却没有，其内容大概如下：
<!doctype html>
<html {{ html_attrs }}>
<head>
<!-- 省略部分内容 -->
</head>
<body {{ body_attrs }}>
<!-- built files will be auto injected -->
{{ APP }}
</body>
</html>实际运行的时候script标签是服务端渲染时动态在上述APP变量处生成的，这个时候我们就需要对渲染的HTML模板APP处进行修改，可以直接使用Nuxt的钩子函数，在nuxt.config.js文件，导出的json中添加如下代码：
hooks: {
'vue-renderer': {
ssr: {
templateParams(templateParams) {
templateParams.APP = templateParams.APP.replace(
/<script/gi,
'<script crossorigin'
)
}
}
}
}Nuxt更多hooks相关内容可以看这里。
编译时添加crossorigin
还有一种情况就是类似于动态import，他生成script标签的时候是受babel来控制的。这时就需要修改webpack打包时候的配置了，好在Nuxt是支持修改配置的，再修改nuxt.config.js文件如下：
build:{
// ... 其他配置
extend(config) {
config.output.crossOriginLoading = 'anonymous'
},
}webpack配置crossOriginLoading可以看这里。
总结
综上，需要在nuxt.config.js文件中添加如下代码：
module.exports = {
build:{
// ... 其他配置
extend(config) {
config.output.crossOriginLoading = 'anonymous'
},
},
hooks: {
'vue-renderer': {
ssr: {
templateParams(templateParams) {
templateParams.APP = templateParams.APP.replace(
/<script/gi,
'<script crossorigin'
)
}
}
}
}
}腾讯云开发者
