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

Posted 2023-02-22

【中文标题】如何在 Nuxt 静态文件响应中添加标题？

【英文标题】：How to add headers on Nuxt static files response?

【发布时间】：2019-02-02 06:35:23

【问题描述】：

我在静态文件夹中有一个 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()

【参考方案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')
  

【讨论】：

知道为什么这只适用于开发而不是生产吗？

【参考方案2】：

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

【讨论】：

此方法不适用于我在 netlify 上的生产