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

【问题标题】：Trouble getting an Authentication Token using Axios for React使用 Axios for React 获取身份验证令牌时遇到问题
【发布时间】：2017-01-06 18:31:36
【问题描述】：

我正在尝试在反应应用中使用 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;

【问题讨论】：

确保您的服务器支持 cors 请求并打印 response.data 以检查从服务器返回的内容。
我试图返回 response.data 但我没有得到任何响应，因为它捕获了错误。它说一个 400 Bad request。有什么不好的呢？
可能是cors 相关问题。尝试使用axios 发送cors 请求。
xhr.js:175 OPTIONS api.mmitnetwork.com/TokendispatchXhrRequest @xhr.js:175xhrAdapter @xhr.js:12dispatchRequest @dispatchRequest.js:52 localhost/:1 XMLHttpRequest 无法加载 api.mmitnetwork.com/Token.Response 预检无效HTTP 状态码 400 App.js:31 错误：网络错误（…）

标签： authentication reactjs axios

【解决方案1】：

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

Access-Control-Expose-Headers: Authorization, Permissions

默认可访问的标题：

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

阅读这里Access-Control-Expose-Headers

来自 php 服务器的完整 CORS 访问示例

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");

【讨论】：

你也应该让你的服务器在没有授权的情况下响应 OPTIONS 请求。这似乎是您得到的错误 400。

【解决方案2】：

您需要设置withCredentials: true, 标头，这将连同此请求一起发送cookie

【讨论】：