Vue调用Firebase Auth REST API出现400 Bad Request错误求助

遇到400 Bad Request错误，请求详情如下：

POST

scheme
 https
host
 identitytoolkit.googleapis.com
filename
 /v1/accounts:signUp
key
 AIzaSyAk1ueCLjDDWCNrt_23o5A4RCfeaYIlN6k
Address
 74.125.24.95:443
Status
400
Bad Request
VersionHTTP/3
Transferred850 B (198 B size)
Referrer Policystrict-origin-when-cross-origin
Request PriorityHighest


access-control-allow-origin
 http://localhost:8080
access-control-expose-headers
 date,vary,vary,vary,content-encoding,server,content-length
alt-svc
 h3=":443"; ma=2592000,h3-29=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"
cache-control
 no-cache, no-store, max-age=0, must-revalidate
content-encoding
 gzip
content-length
 129
content-type
 application/json; charset=UTF-8
date
 Mon, 24 Oct 2022 12:07:19 GMT
expires
 Mon, 01 Jan 1990 00:00:00 GMT
pragma
 no-cache
server
 ESF
vary
 Origin
vary
 X-Origin
vary
 Referer
x-content-type-options
 nosniff
x-frame-options
 SAMEORIGIN
x-xss-protection
 0

Accept
 */*
Accept-Encoding
 gzip, deflate, br
Accept-Language
 en-US,en;q=0.5
Connection
 keep-alive
Content-Length
 79
Content-Type
 text/plain;charset=UTF-8
Host
 identitytoolkit.googleapis.com
Origin
 http://localhost:8080
Referer
 http://localhost:8080/
Sec-Fetch-Dest
 empty
Sec-Fetch-Mode
 cors
Sec-Fetch-Site
 cross-site
TE
 trailers
User-Agent
 Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0

使用的Vue代码片段：

async auth() {
  let url =
  'https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key= AIzaSyAk1ueCLjDDWCNrt_23o5A4RCfeaYIlN6k';
  if (this.mode=="signup") {
    url =
    'https://identitytoolkit.googleapis.com/v1/accounts:signUp?key= AIzaSyAk1ueCLjDDWCNrt_23o5A4RCfeaYIlN6k';
  }
  const response = await fetch(url, {
    method: 'POST',
    body: JSON.stringify({
      email: localStorage.getItem('email'),
      password: localStorage.getItem('password'),
      returnSecureToken: true
    })
  });
  const responseData = await response.json();
  if (!response.ok) {
    const error = new Error(
      responseData.message || 'Failed to authenticate. Check your login data.'
    );
    console.log(error);
    throw error;
  }
  localStorage.setItem('token', responseData.idToken);
  localStorage.setItem('userId', responseData.localId);
  this.$store.state.token = localStorage.getItem('token');
  this.$store.state.userId = localStorage.getItem('userId');
}

按官方文档开发，不确定JSON.stringify是否出错，请问哪里有问题？

1. 请求Content-Type错误 #

从请求详情可见Content-Type为text/plain;charset=UTF-8，但Firebase Auth API要求请求体为JSON格式，必须指定Content-Type: application/json。fetch传输字符串类型的body时，默认会设置Content-Type为text/plain，因此需要手动添加headers配置。

2. API Key前存在多余空格 #

URL中key参数值前带有空格（如key= AIzaSy...），会导致API Key识别失败，需删除空格，改为key=AIzaSy...。

3. 可选检查：localStorage值有效性 #

确认localStorage.getItem('email')和localStorage.getItem('password')能获取到有效值，避免因值为null或空字符串导致请求体不符合API要求。

修正后的代码：

async auth() {
  // 去掉key参数前的空格
  let url = 'https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=AIzaSyAk1ueCLjDDWCNrt_23o5A4RCfeaYIlN6k';
  if (this.mode=="signup") {
    url = 'https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyAk1ueCLjDDWCNrt_23o5A4RCfeaYIlN6k';
  }
  const response = await fetch(url, {
    method: 'POST',
    // 添加headers指定Content-Type为application/json
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      email: localStorage.getItem('email'),
      password: localStorage.getItem('password'),
      returnSecureToken: true
    })
  });
  const responseData = await response.json();
  if (!response.ok) {
    const error = new Error(
      responseData.message || '认证失败，请检查登录信息。'
    );
    console.log(error);
    throw error;
  }
  localStorage.setItem('token', responseData.idToken);
  localStorage.setItem('userId', responseData.localId);
  this.$store.state.token = localStorage.getItem('token');
  this.$store.state.userId = localStorage.getItem('userId');
}

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