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

Question

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

如何在静态文件响应中添加 headers（如 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

如果您使用 axios 进行 HTTP 调用，您可能需要使用 Nuxt version of Axios。在那里你可以很容易地使用 option proxy in combination with Proxy Module

Answer 2

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

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

How to add headers on Nuxt static files response?

javascript

frontend

cors

vue.js

nuxt.js