Reactjs 使用凭据获取似乎不起作用

Question

我正在尝试使用 Bearer 密钥执行 GET 请求，但不明白为什么它不起作用。在 Postman 中，GET 请求完美运行，但在我的 React.js 应用程序中无法实现。我在控制台日志中收到 401 Unauthorized 错误。我添加了 mode: 'no-cors' 因为否则我会出现 Failed to fetch 错误。

const token = 'https://website.com'
const key = 'XXXXXXXXXXXXX'
const obj = {
  method: 'GET',
  mode: 'no-cors',
  withCredentials: true,
  headers: {
    'Authorization': 'Bearer ' + key,
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json'
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      orders: []
    };
  }

  componentDidMount() {
    fetch(token, obj)
    .then(res => res.json())
    .then(
      (result) => {
        console.log(result)
        this.setState({
          isLoaded: true,
          orders: result.order
        });
      },
      (error) => {
        console.error(error)
        this.setState({
          isLoaded: true,
          error
        });
      }
    )
  }

  render () {
    const { error, isLoaded, orders } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div>
          {orders.order.number}
        </div>
      );
    }
  }
}

物体应该是这样的。 Postman GET response

这是我得到的控制台日志错误。 Console log errors

没有 mode: 'no-cors' 我遇到了这个问题，我该如何解决？ Failed to fetch error

对可能出现的问题有什么想法吗？

谢谢！

Answer 1

如果使用no-cors模式，浏览器不会发送不在CORS安全列表中的header。所以"authorization"header不会发送，服务器也不会收到并响应401码。

这里有更多详细信息。 Using fetch API with mode: 'no-cors', can’t set request headers

解决：移除模式：no-cors，服务端响应cors请求。或者只保留 content-type header.

Answer 2

我只要去掉mode: 'no-cors'和'Access-Control-Allow-Origin': '*'就可以解决了。所以fetch中发送的对象最终会变成这样：

const obj = {
  method: 'GET',
  withCredentials: true,
  headers: {
    'Authorization': 'Bearer ' + key,
    'Content-Type': 'application/json'
  }
}

Reactjs 使用凭据获取似乎不起作用

Reactjs fetch with credentials doesn't seem to work

authorization

fetch

reactjs

bearer-token