axios 如何设置 user agent？

做前端或后端开发时,经常要用 axios 发 HTTP 请求，而设置 User Agent 有时候是刚需——比如模拟浏览器访问、适配不同设备接口，或者做数据采集，那「axios 如何设置 user agent？」这里面门道还不少，从基础概念到不同环境的操作，再到避坑技巧，一步步拆开讲。

先搞懂 axios 和 User Agent 是啥？

axios 是个基于 Promise 的 HTTP 客户端，不管是浏览器里发请求，还是 Node.js 写后端服务调用，都能轻松搞定，它的核心是帮我们简化请求流程，处理响应、拦截器这些事儿。

那 User Agent（简称 UA）是请求头里的一串字符串，服务器靠它判断「你用啥浏览器、啥系统、甚至啥版本」，举个例子，Chrome 浏览器发请求时，UA 大概长这样：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36，服务器看到这段，就知道你用 Windows 10 电脑、Chrome 浏览器，然后可能返回 PC 端页面；要是 UA 是 iPhone 的，服务器就返回移动端页面。

为啥要给 axios 设置 User Agent？

不是所有请求都要改 UA，但这些场景下必须搞：

• 前端兼容调试：比如测试页面在 IE 老版本下的表现，可现在电脑基本没装 IE 了，这时候用 axios 模拟 IE 的 UA，就能让服务器返回 IE 对应的页面，方便调试样式或脚本兼容问题。

• 后端接口适配：有些团队的接口会根据 UA 返回不同数据结构（PC 端返回复杂列表，移动端返回简化版），前端开发时，得模拟对应 UA 才能拿到正确数据，不然接口返回可能不对。

• 合法数据采集：比如做行业数据调研（得遵守 robots 协议和网站规则！），用 Node.js 写爬虫时，服务器看到默认的 Node 或 axios UA 可能直接拦截，伪装成浏览器 UA 能降低被拦概率。

浏览器环境下，axios 咋设置 User Agent？

浏览器里,默认的 XMLHttpRequest 或 fetch 请求，UA 是浏览器自动加的，但 axios 可以手动在请求头里指定 UA，步骤特简单：

单条请求设置

直接在 axios.get 或 axios.post 的配置里加 headers，比如模拟 Chrome 浏览器的请求：

axios.get('https://example.com/api', {
  headers: {
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
  }
})

这样发请求时,请求头里的 User - Agent 就会变成你设置的这段，服务器收到后，会以为是 Chrome 浏览器发的请求。

注意点

浏览器出于安全考虑,某些特殊情况会限制 UA 修改（比如用 file:// 协议打开本地文件时，或者浏览器开了严格的安全策略），但日常开发中，访问 http 或 https 协议的网站，自定义 UA 基本都能生效。

Node.js 环境下，axios 设置 User Agent 有啥不同？

Node.js 不是浏览器环境，axios 默认发请求时，没有浏览器那样的 UA（服务器可能识别成 Node 或 axios 客户端），这时候设置 UA 更关键，不然容易被目标服务器拦截。

单条请求设置

和浏览器类似,在请求配置里加 headers，比如模拟 Mac 上 Chrome 的请求：

const axios = require('axios');
axios.get('https://example.com/api', {
  headers: {
    'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
  }
})

场景举例

比如用 Node 写爬虫，目标网站对 Node 客户端直接封 IP，这时候把 UA 改成浏览器的，就能「伪装」过去（但一定要合法！别搞恶意爬取），再比如后端服务间调用，对方服务器根据 UA 做权限控制，也得设置对应的 UA 才能拿到数据。

批量请求，怎么统一设置 User Agent？

项目里好多请求都要同一个 UA，总不能每个请求都写一遍 headers 吧？用 axios 实例 就能解决，一次性配置默认请求头。

步骤

用 axios.create 创建实例，把 UA 塞进默认 headers 里：

// 创建自定义 axios 实例
const customAxios = axios.create({
  headers: {
    'User-Agent': '这里放你要统一用的UA字符串'
  }
});
// 之后用这个实例发请求，自动带 UA
customAxios.get('https://example.com/api1');
customAxios.post('https://example.com/api2');

好处

• 不用重复写 headers，代码更简洁；

• 项目里所有用这个实例的请求,UA 保持一致，方便统一管理（比如整个项目模拟移动端，改实例配置就行）。

设置 User Agent 时，这些坑要避开！

看似简单的设置,实际开发中稍不注意就掉坑里，总结几个常见问题：

坑 1：UA 格式写错，服务器不认

UA 有固定格式逻辑，比如得包含浏览器内核（像 WebKit）、系统信息、浏览器版本这些，要是随便写个 MyCustomUA/1.0，服务器可能识别成「未知客户端」，达不到模拟效果。

解决办法：去 whatsmyua.info 这类网站，复制真实浏览器的 UA，再根据需求修改，比如想模拟 iPhone，就参考真实 iPhone 浏览器的 UA 结构改。

坑 2：浏览器环境下，UA 没生效？

前面说过,浏览器一般允许改 UA，但个别网站可能有防篡改机制（比如某些银行、政务网站，为了安全，强制用浏览器真实 UA），这时候即使前端设置了，实际发出去的还是浏览器真实 UA。

验证方法：打开浏览器开发者工具（F12），看 Network 面板里的请求头，确认 User - Agent 是不是你设置的内容，要是没生效，可能是网站做了限制，这种情况得换思路（比如本地搭代理改 UA，但开发中很少碰到）。

坑 3：Node 环境忘设 UA，请求被拦截

Node 里 axios 默认没 UA，有些网站会把 Node/axios 请求当「非法请求」直接拦掉，Node 环境下，只要是对外请求，尽量设置 UA，别偷懒。

坑 4：动态切换 UA 时，实例配置没更新

用 axios.create 创建的实例，默认 headers 是固定的，如果需求是「部分请求用 UA1，部分用 UA2」，直接改实例的 headers 没用，得在单个请求里单独设置，或者重新创建实例。

比如这样：

// 实例默认 UA 是 UA1
const instance = axios.create({
  headers: { 'User-Agent': 'UA1' }
});
// 某个请求要临时用 UA2，单独加 headers
instance.get('https://example.com/special', {
  headers: { 'User-Agent': 'UA2' }
});

进阶玩法：根据设备自动适配 User Agent

有时候需要「模拟同系统下的不同设备」，比如开发时模拟 iPad 的 UA 看页面布局，这时候可以动态生成 UA：

方法 1：基于真实 UA 改造

前端通过 navigator.userAgent 获取当前浏览器真实 UA，再替换关键部分，比如模拟 iPhone 的 UA：

// 获取真实 UA
const realUA = navigator.userAgent;
// 替换成 iPhone 相关标识
const mockUA = realUA.replace(/Android|Windows NT|Macintosh/i, 'iPhone OS 16_0');
axios.get('https://example.com/api', {
  headers: { 'User-Agent': mockUA }
});

方法 2：用库解析构造

借助 ua-parser-js 这类库，先解析当前 UA 的设备、系统、浏览器信息，再构造目标 UA，比如模拟 iPad：

import UAParser from 'ua-parser-js';
// 解析当前 UA
const parser = new UAParser();
const { os, browser } = parser.getResult();
// 构造 iPad 的 UA
const ipadUA = `Mozilla/5.0 (iPad; CPU OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1`;
axios.get('https://example.com/api', {
  headers: { 'User-Agent': ipadUA }
});

这种动态适配的玩法,适合需要「模拟多种设备测试页面」的场景，不用手动查各种设备的 UA 格式，效率高很多。

安全与合规：设置 User Agent 要守规矩

不管是前端调试还是后端采集,设置 UA 得注意边界：

• 合法爬虫：如果是爬取公开数据，先看网站 robots.txt（https://example.com/robots.txt），允许爬的部分再操作，UA 可以伪装，但别用于恶意攻击、窃取隐私数据。

• 前端生产环境：除非产品需求（AB 测试需要模拟不同设备），否则别随便改 UA，因为真实用户的 UA 包含设备信息，乱改可能影响数据分析（比如统计工具靠 UA 分析用户设备分布）。

• 隐私保护：设置自定义 UA 时，别把用户真实设备信息泄露出去（虽然一般是模拟，但开发时也要留个心眼）。

常见问题 Q&A

最后列几个高频问题,帮大家快速解惑：

• Q：浏览器里，axios 设置的 UA 和浏览器真实 UA 冲突吗？
  A：不冲突，axios 设置的是请求头里的 UA，会覆盖浏览器默认的 UA（只要网站没做强制限制），可以在开发者工具的 Network 面板里看请求头，确认最终发送的 UA。

• Q：Node 里用 axios 设置 UA，能完全伪装成浏览器吗？
  A：大部分情况下可以，但有些网站会结合其他请求头（Accept、Cookie）判断是否为真实浏览器，所以除了 UA，可能还要配套设置其他请求头（Accept: text/html,application/xhtml+xml 这类）。

• Q：多个拦截器里设置 UA，谁生效？
  A：axios 的请求拦截器是链式执行的，后执行的拦截器会覆盖前面的 headers，所以要注意拦截器的顺序，或者在最终请求配置里单独设置 UA 确保生效。