我在使用Next js时遇到以下错误。我正在构建一个使用axios作为http客户端的身份验证管道。

npx create-next-app my-app
cd my-app
npm run dev

npm install axios

import axios from 'axios';

axios.defaults.baseURL = 'https://api.example.com';
axios.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
axios.interceptors.response.use(
  (response) => {
    // 对响应数据做些什么
    return response;
  },
  (error) => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

// pages/api/auth.js
import axios from 'axios';

export default async function authHandler(req, res) {
  try {
    // 在这里进行身份验证逻辑
    // 使用axios发起HTTP请求
    const response = await axios.get('https://api.example.com/auth');
    // 处理响应数据
    res.status(200).json(response.data);
  } catch (error) {
    // 处理错误
    res.status(500).json({ error: '身份验证失败' });
  }
}

import axios from 'axios';

export default function MyPage() {
  const fetchData = async () => {
    try {
      const response = await axios.get('/api/auth');
      // 处理响应数据
    } catch (error) {
      // 处理错误
    }
  };

  return (
    <div>
      <button onClick={fetchData}>获取数据</button>
    </div>
  );
}