Postman/浏览器请求MEXC API正常，axios调用失败求原因

核心原因 #

• 浏览器CORS限制：你在StackBlitz里运行的是前端浏览器环境代码，页面域名与api.mexc.com不属于同一域名，浏览器的同源策略会拦截跨域请求。而Postman是独立客户端工具、直接在浏览器地址栏访问属于顶级导航请求，两者都不受浏览器的CORS规则约束，因此能正常获取响应。
• 请求头校验不通过：MEXC的API可能对User-Agent这类请求头有隐性校验要求。axios在浏览器环境下的默认User-Agent可能不符合API的规则，被拦截拒绝；而浏览器地址栏、Postman会自动带上符合要求的请求头标识，所以能成功访问。

解决方式 #

1. 处理CORS问题：
   • 开发阶段：使用本地代理（比如Vue CLI的devServer.proxy、Create React App的代理配置），将API请求转发到本地服务，再由本地服务调用MEXC API，绕开浏览器的跨域限制。
   • 生产阶段：通过自有后端服务转发请求，前端仅请求自家后端接口，再由后端调用MEXC的API。
2. 修正请求头：
   手动设置模拟浏览器的User-Agent，示例代码如下：

   try {
     const { data } = await axios.get(
       'https://api.mexc.com/api/v3/depth?symbol=BTCUSDT',
       {
         headers: {
           'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36'
         }
       }
     );
     console.log('data', data);
   } catch (err) {
     console.log(`Something went wrong:`, err);
   }
   

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