# 设置 baseURL、timeout、headers

URL: https://caijiao.org/axios/request-config/baseurl-timeout-headers
Source: docs/axios/request-config/baseurl-timeout-headers.md
Description: 本章节讲解如何在 Axios 请求中配置 baseURL、timeout 和 headers，包括全局和单个请求的设置方法，并通过示例展示如何自定义请求头、控制超时以及统一管理接口地址，提高前端请求的灵活性与可维护性。

Axios 提供了多种方式配置请求的基础 URL、超时时间和自定义请求头，这些配置可以应用于单次请求，也可以应用于全局实例。

## 1. 配置 baseURL

`baseURL` 用于设置请求的基础路径，所有相对 URL 都会自动拼接该路径。

```javascript
import axios from "axios";

const instance = axios.create({
  baseURL: "https://api.example.com", // 基础 URL
});

instance
  .get("/users") // 实际请求 URL: https://api.example.com/users
  .then((res) => console.log(res.data));
```

## 2. 配置 timeout

`timeout` 用于设置请求超时时间（毫秒），超过该时间未响应将触发错误。

```javascript
axios
  .get("https://api.example.com/data", { timeout: 5000 })
  .then((res) => console.log(res.data))
  .catch((err) => console.error("请求超时或出错：", err.message));
```

## 3. 配置 headers

可以自定义请求头，用于身份认证、内容类型等场景。

```javascript
axios
  .post(
    "/login",
    { username: "Alice", password: "123456" },
    {
      headers: {
        "Content-Type": "application/json",
        "X-Auth-Token": "token123",
      },
    }
  )
  .then((res) => console.log("登录成功：", res.data));
```

## 4. 全局配置示例

```javascript
axios.defaults.baseURL = "https://api.example.com";
axios.defaults.timeout = 7000;
axios.defaults.headers.common["Authorization"] = "Bearer token123";
```

---

> 💡 小提示：合理使用 baseURL、timeout 和 headers 可以减少重复代码、统一接口请求行为，同时提高请求的可维护性和安全性。