Nuxt 3 如何实现CORS？

Question

这与我关于 Nuxt 3 API 安全性的其他问题有关。如何添加 CORS？目前，使用头盔模块对我来说不起作用。

这是我上一个问题中的链接 Nuxt 3 阻止其他网站、应用程序或域访问我的 API？

Answer 1

有多种方法可以在您的应用程序上实施 CORS。

方法1. 使用 Nuxt3 Cors 模块。该模块使用流行的express中间件头盔模块。

方法2. 使用 Nuxt 的安全模块。不仅添加了 CORS 标头，还添加了更多安全功能。

方法3。 使用服务器中间件手动添加 CORS。

这是一个例子。

~/server/middleware/cors.ts

export default defineEventHandler((event) => {
    const headers = {
        'Access-Control-Allow-Origin': 'Same-Origin',
        'crossOriginResourcePolicy': 'same-origin',
        'crossOriginOpenerPolicy': 'same-origin',
        'crossOriginEmbedderPolicy': 'require-corp',
        'contentSecurityPolicy': "default-src 'self';base-uri 'self';font-src 'self' https: data:;form-action 'self';frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests",
        'X-XSS-Protection': 1
    }
    setHeaders(event, headers)

})

希望对您有帮助。

Answer 2

就我而言，我在

nuxt.config.ts

设置代理

export default defineNuxtConfig({
    routeRules: {
        '/api/**': {
            proxy: { to: "https:/backend/**" },
         },
    },
}