使用Axios发送GET请求失败但Postman请求正常是什么原因？

问题原因 #

• 最核心的错误是请求头拼接错误：你定义了auth变量存储自定义请求头，但直接嵌套传入了headers配置项，实际发出的请求里并不会携带TGH-Api-Key字段，只会携带一个值为对象的auth字段，服务端无法识别自然不会返回正确数据。
• 你没有添加错误捕获逻辑，请求报错时无法拿到具体报错信息，难以定位问题。
• 请求直接写在组件顶层，会随着组件每次渲染重复触发，不属于合理的副作用调用逻辑。
• 也可以排查是否存在跨域限制：Postman不受浏览器同源策略限制，如果是跨域问题需要服务端配置CORS规则。

修复后的代码 #

import logo from './logo.svg';
import './App.css';
import axios from 'axios';
 
function App() {
  // 把请求放到useEffect里，只在组件挂载时触发一次
  React.useEffect(() => {
    const headers = { 'TGH-Api-Key': 'my_key' }
 
    axios.get("http://api-site.net/api/value/1", { headers })
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        // 打印错误信息方便定位
        console.error('请求报错：', err.response || err.message)
      })
  }, [])
 
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
 
export default App;

内容的提问来源于stack exchange，提问作者John Egbert