Reactjs 可从一台服务器向另一台服务器发出请求-“；错误：请求失败，状态代码为401“；

我试图从一台服务器（localhost:3000）向另一台服务器（localhost:3001）发出一个api请求，但我得到了身份验证错误401

注意：如果我硬编码身份验证令牌，我就能够发出请求。这让我得出结论，我没有以正确的方式设置axios身份验证头

apiFile.ts文件

import axios, { AxiosInstance } from 'axios';
import { Dispatch } from 'redux';
import { handleResponse } from './handlers';
import { getDiscussionsAction } from '../../redux/actions/dataActions';

  let axiosInstance: AxiosInstance = axios.create();

function addDiscussion(data:String) {
    axiosInstance.post('http://localhost:3001/api/addDiscussion',data).then(response=> {
    console.log(response)
  }).catch(error=>{
    console.log('error on adding post',error)
  })
}

function setupAxiosInstance(token: string) {
  console.log('inside setup Axios Instance')
  console.log('token setup Axios',token)
    axiosInstance = axios.create({
        headers: {
          Authorization: 'Bearer ' + token}
    });
}
export default {
    getDiscussions,
    addDiscussion,
    setupAxiosInstance
}

预期： 当我设置AxiosInstance（字符串）并将令牌传递给它时，它应该为后续请求设置带有令牌的头

实际： 虽然我可以看到setupAxiosInstance（String）方法已收到令牌，但在随后的请求（例如：AddDiscussion api req）中， 它没有身份验证

[.当我在-'let axiosInstance:axiosInstance=axios.create（）；'中硬编码令牌时，它会起作用 像

而且，如果我做了下面这样的事情，它仍然不起作用

function setupAxiosInstance(token: string) {
  console.log('inside setup Axios Instance')
  console.log('token setup Axios',token)
    axiosInstance = axios.create({
        headers: {
          Authorization: 'Bearer ya29.Gl9uB4tmH0GzYyxBOmeICZa7vsNLZXPuj2du3Q4HIBMGQzZhixXWuS5mCNSPzkCzfjYK0-XNTM0bHI_Fmist9bjYU9CdD06ZtzHPs8TCHmAQcG1dryM8u9_LtfOHiaVGzA'}
    });
}

---

如果有人能指出我做错了什么或给我指出了正确的方向，那就太好了。

您可以像这样设置实例头，而不是重新分配实例

function setupAxiosInstance(token: string) {
  console.log('inside setup Axios Instance')
  console.log('token setup Axios',token)
  axiosInstance.defaults.headers.common.Authorization = `Bearer ${token}`;
}

---

如果有人遇到同样的问题，我可以通过在我的组件中使用react router引导中的LinkContainer来解决这个问题（我的一个朋友解决了这个问题。他很荣幸）。这不是axios头授权的问题，而是我如何在react组件中导航的问题

问题：虽然我可以看到setupAxiosInstance（String）方法已收到令牌，但在随后的请求（例如：AddDiscussion api req）中，它没有身份验证

原因: 每次我使用href导航到另一个链接时，都会刷新页面，并删除标题授权

解决方案：

import { LinkContainer } from 'react-router-bootstrap'

使用LinkContainer进行导航

<Nav className="mr-auto">
        <LinkContainer to="/discussion">
          <Nav.Link >Discussion</Nav.Link>
        </LinkContainer>
      </Nav>
      <LinkContainer to="/add-discussion">
        <Button variant="primary" id="ask-a-question-button">Ask a Question?</Button>
      </LinkContainer>

讨论
问个问题？

或者使用push.history

<Navbar.Brand href="/home" className="Nav-link">Discussion</Navbar.Brand>
        <Nav className="mr-auto" onSelect={(selectedKey: string) => console.log('selected', selectedKey)}>
          <Nav.Link onClick={() => this.props.history.push("/home")}>
            Home
            {/* <Link to="/">Home</Link> */}
          </Nav.Link>

          <Nav.Link onClick={() => this.props.history.push("/login")}>
            Login
            {/* <Link to="/login/">Login</Link> */}
          </Nav.Link>
        </Nav>
      </Navbar>

讨论
console.log（'selected'，selectedKey）}>
this.props.history.push（“/home”）}>
家
{/*主页*/}
this.props.history.push（“/login”）}>
登录
{/*登录*/}

但不能使用href导航

<Nav className="mr-auto">
  <Nav.Link href="/Discussion">Discussion</Nav.Link>
</Nav>

讨论

<Nav className="mr-auto">
  <Nav.Link href="/Discussion">Discussion</Nav.Link>
</Nav>