Question

我在静态文件夹中有一个json文件，我正试图从另一个网站访问它，但CORS出现了问题。

如何在静态文件响应上添加标头（如Access-Control-Allow-Origin）？

我尝试了此https://github.com/nuxt/nuxt.js/issues/2554#issuecomment-363795301，但不适用于静态文件。

module.exports = function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', '*');
    res.setHeader('Access-Control-Allow-Methods', '*');
    next()
}

Answer 1

Nuxt具有内置渲染属性选项，您可以在nuxt.config.js文件内部使用。

如果要为静态文件添加访问控制标头，只需使用setHeaders函数。

请参见https://nuxtjs.org/api/configuration-render#static。

在后台Nuxt使用serve-static包（也用于其他选项）。

示例：

render: {
   static: {
     setHeaders(res) {
       res.setHeader('X-Frame-Options', 'ALLOWALL')
       res.setHeader('Access-Control-Allow-Origin', '*')
       res.setHeader('Access-Control-Allow-Methods', 'GET')
       res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')
  }
}

Answer 2

如果您使用axios进行HTTP调用，则可能要使用Nuxt version of Axios。在那里，您可以轻松地将option proxy与Proxy Module组合使用

如何在Nuxt静态文件响应上添加标题？

2 个答案: