React调用OpenWeather API报401但浏览器访问URL正常如何解决

你遇到的401授权错误是请求参数被异常修改导致的，两个具体诱因：

1. 你在baseURL中使用了HTML转义字符&作为参数分隔符，浏览器访问地址时会自动把&解析为正常的&，但axios不会做这类HTML转义解析，导致服务端无法正确识别appid参数。
2. 调用api.get('/')时传入的斜杠会被拼接到baseURL末尾，最终请求地址的appid参数值末尾会多出一个斜杠，相当于你提交的appid和实际值不符，直接触发授权校验失败。

直接修正axios配置和调用方式即可，修正后的代码如下：

import React, { Component } from 'react'
import './App.css';
import axios from 'axios'
const api=axios.create({
  // 把&替换为原生&，不要加多余后缀
  baseURL:'https://api.openweathermap.org/data/2.5/weather?q=Karachi&appid=e3f8864274e67280b3ee8eb501d3718a'
})

export class App extends Component {
  constructor(){
    super();
    // 不要传/，避免拼接多余斜杠
    api.get('').then(res=>{
      console.log(res.data)
    })
  }
  render() {
    return (
      <div className="App">
       <h1>React Weather App</h1>
       <main>
       </main>
       <footer>
       </footer> 
      </div>
    )
  }
}

export default App

更推荐把固定接口地址和查询参数分开配置，避免手动拼接参数出现转义、符号错误问题：

const api = axios.create({
  baseURL: 'https://api.openweathermap.org/data/2.5/weather'
})

// 调用时通过params传参，axios会自动处理参数拼接
api.get('', {
  params: {
    q: 'Karachi',
    appid: 'e3f8864274e67280b3ee8eb501d3718a'
  }
}).then(res => {
  console.log(res.data)
})

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