如何在Nuxt静态文件响应中添加头部？

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()
}

- Zack Stone

Answer 1

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

如果您想为静态文件添加Access-Control Headers，只需使用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')
  }
}

- Lukas Vollmer

---

你有什么想法，为什么这只在开发环境中有效而在生产环境中无效？ - janekkkk

Answer 2

如果您正在使用axios进行HTTP调用，您可能想要使用Nuxt版本的Axios。在那里，您可以轻松地使用选项proxy与代理模块相结合。

- power-cut

---

这个方法在我的Netlify生产环境中无法工作。 - Firzok Nadeem