Question

我正在尝试使用反应应用中的axios来获取身份验证令牌。

以下是我得到的错误： “XMLHttpRequest无法加载https://api.mmitnetwork.com/Token。预检的响应包含无效的HTTP状态代码400”

这是我的代码。

 var App = React.createClass({
  getInitialState() {
    return {
      token: ''
    }
  },
  componentDidMount() {
    var _this = this;

    axios.post('https://api.mmitnetwork.com/Token', {
      grant_type: 'password',
      username: 'jpdesigning',
      password: 'Upahem2_88'
    }).then((response) => {
      console.log('Success!')
      _this.setState({
        token: response.data
      })
    }).catch((error) => {
      console.log(error)
    })
   },
  render() {
    return (
      <div className="App">
           {this.state.token}
      </div>
     );
  }
})

export default App;

Answer 1

您的服务器需要允许跨域（CORS）客户端通过在服务器的响应上设置以下标头来访问您的标头，并告诉它们它们是哪个标头（这里您允许两个标头：授权和权限 - 即包括自定义标题）

Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma

默认情况下可访问的标头：

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Credentials: true ");
header("Access-Control-Allow-Methods: OPTIONS, GET, POST");
header("Access-Control-Expose-Headers: Authorization");
header("Access-Control-Allow-Headers: Content-Type, Depth, User-Agent, X-File-Size,
X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control");

请阅读Access-Control-Expose-Headers

来自php服务器的

示例，用于完整的CORS访问

hive-site.xml

Answer 2

您需要设置withCredentials: true,标头，这会将Cookie与此请求一起发送

使用Axios for React获取身份验证令牌时遇到问题

2 个答案: