Javascript 如何设置默认标题以解决422状态代码错误

这是我第一次使用API。我有以下数据。我需要将注册数据发布到API并登录。但当我试图将数据发布到API时，却得到一个422状态代码错误。我想我必须设置标题，但不知道应该在哪里以及如何获取访问令牌和登录。有关于他们的视频教程或文档吗

 'headers' => [
        'Accept' => 'application/json',
        'Authorization' => 'Bearer '.$accessToken,
    ]
    'api' => [
        [
            'method' => 'post',
            'url' => 'URL/api/register',
            'params' => [
                'query' => null,
                'body' => [
                    'phone' => ['max:255'],
                    'password' => ['min:7'],
                    'cnd' => ['0|1'],
                ]
            ],
            'response' => [
                'data' => [
                    'data':null,
                    'message':'Successfully created user!',
                    'errors':null
                ],
                'status' => 201
            ]
        ],
        [
            'method' => 'post',
            'url' => 'http://localhost:8000/api/login',
            'params' => [
                'query' => null,
                'body' => [
                    'phone' => ['max:255'],
                    'password' => ['min:7'],
                ]
            ],
            'response' => [
                'data' => [
                    'data': [
                        'access_token': 'xxxx',
                        'token_type': 'Bearer',
                        'expires_at': 'YYYY-MM-DD HH:II:SS'
                    ],
                    'message': 'User login successfully.',
                    'errors': null
                ],
                'status' => 200
            ]
        ]

反应码

import React,{useState} from 'react'
import './SignUp.style.scss'
import eyeClosed from '../img/eye-closed.svg'
import eyeOpen from '../img/eye-open.svg'
import axios from 'axios'

const SignUp = () => {

    const [type, setType] = useState(false)
    const [password, setPassword] = useState(false)
    const [email, setEmail] = useState()

   const handleSubmit = (e) => {
        e.preventDefault();
        

        axios.post('https://mb.unitedskills.space/api/register', {
            phone: email,
            password: password,
            cnd:1
        })
        .then(res => console.log(res))
        .catch(err => console.log(err))

    }

    return (
        <form className='login-form' onSubmit={handleSubmit}>
        <div className="form-control">
            <label htmlFor="email">Email</label>
            <input spellcheck="false" onChange={e => setEmail(e.target.value)} type="email" name="email" id="email" />
            <small>&nbsp;</small>             
        </div>

        <div className="form-control">
            <label className="password-label" htmlFor="password">Password</label>
            <div className="password-container">
                <input spellcheck="false" onChange={e => setPassword(e.target.value)} type={type ? 'text' : 'password'} className="password" name="password" id="password" />
                <span className="eye"><img onClick={e => setType(!type)} src={type ? eyeOpen : eyeClosed} alt="eye icon" /></span>
            </div>
        </div>

        <button className="submit-btn" >Register</button>
        </form>
    )
}

export default SignUp

import React，{useState}来自“React”
导入“./SignUp.style.scss”
从“../img/eye closed.svg”导入eyeClosed
从“../img/eye open.svg”导入eyeoopen
从“axios”导入axios
常量注册=（）=>{
const[type，setType]=useState（false）
const[password，setPassword]=useState（false）
const[email，setEmail]=useState（）
常量handleSubmit=（e）=>{
e、 预防默认值（）；
轴心柱https://mb.unitedskills.space/api/register', {
电话：电子邮件，
密码：密码，
cnd:1
})
.then（res=>console.log（res））
.catch（err=>console.log（err））
}
返回(
电子邮件
setEmail（e.target.value）}type=“email”name=“email”id=“email”/
密码
setPassword（e.target.value）}type={type？'text'：'password'}className=“password”name=“password”id=“password”/>
登记
)
}
导出默认注册

首先，创建一个新的axios文件，并执行以下操作：

import axios from 'axios';

const url = 'https://yourapi.com/';

const api = axios.create({
  baseURL: url,
});

const revalidateToken = async () => {
  const refreshToken = localStorage.getItem('@Api:refreshToken');
  await axios
    .post(`${url}token`, {
      refreshToken,
    })
    .then((config) => {
      localStorage.setItem('@Api:acessToken', config.data.accessToken);
    })
    .catch((error) => {
      return error;
    });
};

api.interceptors.request.use(async (config) => {
  const token = localStorage.getItem('@Api:acessToken');

  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }

  return config;
});

api.interceptors.response.use(
  async (config) => {
    return config;
  },
  async (error) => {
    if (error.response.status === 401) {
      await revalidateToken();
    }
    return Promise.reject(error);
  },
);

export default api;

---

解释代码更改（“为什么”）的答案比那些简单地从其他位置复制和粘贴代码的答案更经常地被向上投票，而较少被向下投票。例如，OP目前没有使用localStorage，因此在没有解释的情况下引入它并没有太大帮助…@Bruno，这让我很困惑，我认为它与我的问题无关。谷歌有很多这样的例子，不过还是要谢谢你。