如何在Nextjs中启用所有CORS API调用

mrfwxfqh  于 2023-04-30  发布在  其他
关注(0)|答案(1)|浏览(136)

我想从我的应用程序中为所有源和目标启用CORS。
我之所以关注这个https://vercel.com/guides/how-to-enable-cors,是因为我在Vercel上部署了Nextjs应用程序。
下面是next.config.js文件。

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  swcMinify: true,
  eslint: {
    ignoreDuringBuilds: true,
  },
  async headers() {
    return [
      {
        source: '/',
        headers: [
          { key: 'Access-Control-Allow-Credentials', value: 'true' },
          { key: 'Access-Control-Allow-Origin', value: '*' },
          {
            key: 'Access-Control-Allow-Methods',
            value: 'GET,OPTIONS,PATCH,DELETE,POST,PUT',
          },
          {
            key: 'Access-Control-Allow-Headers',
            value:
              'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version',
          },
        ],
      },
    ]
  },
}

module.exports = nextConfig

目的是允许Access-Control-Allow-Origin: "*"用于应用程序的所有API调用。

b1zrtrql

b1zrtrql1#

值得一提的是,如果你使用localhost,而localhost域没有经过认证,它将无法工作(你可以为你的localhost认证并使用https://localhost:300。...等)。
所以大多数情况下,对于本地主机,你需要使用重写,这样请求就不是从浏览器转发,而是从本地服务器转发到外部源。
祝你好运!

相关问题