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

我可以通过简单地取出mode: 'no-cors' 和'Access-Control-Allow-Origin': '*' 来解决它。所以在 fetch 中发送的对象最终会是这样的：

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

Answer 2

如果您使用 no-cors 模式，浏览器将不会发送不在 CORS 安全列表中的标头。所以不会发送“授权”头，服务器也不会收到并响应401码。

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

解决方案：移除模式：no-cors，服务器响应cors请求。或者只保留内容类型标题。