title: How to reset password using React and Redux?
body: <p>I'm trying to reset password using React and Redux. I got an url to email address and when I paste it into browser everything is fine - site with fields to input new password is rendering. The problem is when I want to set new password. Response from Django server is 200 OK but I have this error in the browser after submit:</p>
  <pre><code>Access to XMLHttpRequest at 'http://127.0.0.1:8000/password-reset/confirm/' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field token is not allowed by Access-Control-Allow-Headers in preflight response.
  </code></pre>
  <p>My password.js file in actions directory (Redux):</p>
  <pre><code>export const resetPassword = (password, token) =&gt; (dispatch, getState) =&gt; {
  
    // Headers
    const config = {
      headers: {
        'Content-Type': &quot;application/json&quot;,
        token
      },
    }
  
    const body = JSON.stringify({ password })
  
    // Post request to API
    axios.post('http://127.0.0.1:8000/password-reset/confirm/', body, config)
    .then(res =&gt; {
      console.log(res);
       dispatch({
        type: RESET_PASSWORD,
        payload: res.data
      })
    })
    .catch(err =&gt; {
      console.log(err.response.status);
    })
  }
  </code></pre>
  <p>NewPasswordPage.js:</p>
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import PropTypes from 'prop-types';
  import { resetPassword } from '../actions/password';
  
  class NewPasswordPage extends Component {
    state = {  
      password: '',
      token: ''
    }
  
    static propTypes = {
      resetPassword: PropTypes.func.isRequired,
    }
  
    handleChange = e =&gt; {
      this.setState({ [e.target.name]: e.target.value })
      console.log(this.state);
    }
  
    handleSubmit = e =&gt; {
      e.preventDefault();
      console.log(&quot;OK NEW PASSWORD&quot;)
  
      const { password, token } = this.state;
  
      this.props.resetPassword(password, token)
    }
  
    render() { 
      return (  
        &lt;div className=&quot;col-md-6 m-auto&quot;&gt;
          &lt;div className=&quot;card card-body mt-5&quot;&gt;
            &lt;h2 className=&quot;text-center&quot;&gt;New password&lt;/h2&gt;
            &lt;form onSubmit={this.handleSubmit}&gt;
              &lt;div className=&quot;form-group&quot;&gt;
                &lt;label&gt;New password&lt;/label&gt;
                  &lt;input
                    type=&quot;password&quot;
                    className=&quot;form-control&quot;
                    name=&quot;password&quot;
                    onChange={this.handleChange}
                    value={this.state.password}
                  /&gt;
              &lt;/div&gt;
              &lt;div className=&quot;form-group&quot;&gt;
                &lt;label&gt;Token&lt;/label&gt;
                  &lt;input
                    type=&quot;text&quot;
                    className=&quot;form-control&quot;
                    name=&quot;token&quot;
                    onChange={this.handleChange}
                    value={this.state.token}
                  /&gt;
              &lt;/div&gt;
              &lt;div className=&quot;form-group&quot;&gt;
                &lt;button type=&quot;submit&quot; className=&quot;btn btn-primary&quot;&gt;Submit&lt;/button&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const mapStateToProps = state =&gt; ({
    resetPassword: state.password
  })
   
  export default connect(mapStateToProps, { resetPassword })(NewPasswordPage);
  </code></pre>
  <p>At this time I am trying to solve the problem and just paste the token in input. I don't know how to get the token from url - if you have any idea that would be great.</p>
  <p>URL:</p>
  <pre><code>http://localhost:3000/password-reset/5e570e6856cbe8a935f06f8f52
  </code></pre>
  <p>Endpoint in App.js:</p>
  <pre><code>&lt;Route path='/password-reset/:token' component={NewPasswordPage} /&gt;
  </code></pre>