无法从一台服务器向另一台服务器发出请求 - “错误：请求失败，状态码 401”答案

【问题标题】：Uable to make a req from one server to another - "Error: Request failed with status code 401"无法从一台服务器向另一台服务器发出请求 - “错误：请求失败，状态码 401”
【发布时间】：2019-08-23 23:43:08
【问题描述】：

我正在尝试从一台服务器 (localhost:3000) 向另一台服务器 (localhost:3001) 创建 api req，但我收到身份验证错误 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
}

预期：当我 setupAxiosInstance(String) 并将令牌传递给它时，它应该为后续请求设置带有令牌的标头。

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

[。当我在 -'let axiosInstance: AxiosInstance = axios.create();' 中对令牌进行硬编码时，它可以工作喜欢

let axiosInstance: AxiosInstance = axios.create({
      headers: {
        Authorization: 'Bearer fjsdkf.sdjkfksfklsdjjksfshjdfhksndyrndbsjdjasbckcnbsdcb;efjdfnsdklncsncsln'}
  });)

而且，如果我执行以下操作，它仍然无法正常工作。

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'}
    });
}

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

【问题讨论】：

标签： reactjs axios react-router-bootstrap

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

如果有人遇到同样的问题。我可以通过在我的组件中使用 react-router-bootstrap 中的 LinkContainer 来解决问题（我的一个朋友想通了。向他致敬。）这不是问题使用 axios 标头授权，但我是如何在我的反应组件中导航的。

问题：虽然我可以看到 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>

但不要使用 href 导航

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

【讨论】：