Question

我正在尝试从一台服务器（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
}

预期：当我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'}
    });
}

如果任何人都可以指出我在做错什么或将我指向正确的方向？那会很棒。

Answer 1

代替重新分配实例，您可以像这样设置实例头

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

Answer 2

万一有人遇到同样的问题。我可以通过使用组件中react-router-bootstrap中的LinkContainer解决此问题（我的一个朋友知道了。对他表示敬意。）。这不是问题。使用axios标头授权，但是如何浏览我的React组件。

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

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

解决方案：

Glide.with(context)
    .load(Base64.decode(base64String, Base64.DEFAULT))
    .asBitmap()
    .into(circleImageView);

使用LinkContainer进行导航

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

或使用push.history

<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>

但是dnt使用href导航

<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>

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

2 个答案: