Nuxt.js集成Firebase Auth REST API时Axios跨域CORS问题求助

嘿，这个CORS坑我之前刚踩过，咱们一步步来解决它！

先搞清楚问题出在哪 #

1. 你调用的接口错了：signInWithCustomToken是用自定义token登录的接口，但你传的是邮箱和密码，应该用accounts:signInWithPassword才对！
2. 前端请求里加Access-Control-Allow-Origin完全没用——这个响应头是服务器返回给浏览器的，不是你前端发出去的，加了也是白加。
3. 直接从前端跨域调用Firebase Auth REST API，浏览器的同源策略会拦截，最稳妥的解决方式是用Nuxt的代理转发请求。

具体解决步骤 #

1. 修正API接口路径 #

把请求的接口从accounts:signInWithCustomToken改为accounts:signInWithPassword，这是邮箱密码登录的正确接口。

2. 安装并配置Nuxt代理模块 #

代理的原理是让Nuxt服务器帮你发起请求，服务器端请求没有跨域限制，再把结果返回给前端，完美绕过CORS。

首先安装依赖：

npm install @nuxtjs/proxy --save

然后修改nuxt.config.js的配置：

export default {
  // 注册代理模块
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  // 配置Axios基础路径
  axios: {
    baseURL: '/api',
    credentials: false
  },
  // 配置代理规则
  proxy: {
    '/api': {
      target: 'https://identitytoolkit.googleapis.com/v1',
      pathRewrite: { '^/api': '' }, // 把/api前缀去掉，转发到目标地址
      changeOrigin: true
    }
  },
  // 确保你的Firebase API Token配置正确
  env: {
    firebaseApiToken: '你的实际Firebase API Key'
  }
}

3. 修正login.vue里的请求代码 #

调整请求路径，去掉完整的域名，用代理的前缀，同时修正Content-Type的大小写（之前写的application/Json是错的，应该是application/json）：

submitLogin() {
  this.$axios.post(
    `/api/accounts:signInWithPassword?key=${process.env.firebaseApiToken}`,
    {
      email: "abc@example.com",
      password: "123456"
    },
    {
      headers: {
        'Content-Type': 'application/json'
      }
    }
  )
  .then((response) => {
    console.log('登录成功：', response.data);
  })
  .catch((error) => {
    console.error('登录失败：', error.response?.data || error.message);
  })
}

额外注意事项 #

• 确保你的Firebase项目控制台中，Authentication -> 登录方法里已经开启了「电子邮件/密码」登录方式。
• Firebase的API Key是可以安全暴露在前端的（Firebase有安全规则和项目设置来限制滥用），但不要把服务端私钥泄露出去。

内容的提问来源于stack exchange，提问作者Noob Coder