Every axios request firing twice in react-redux app?

Question

There are many similar question but nothing could help for me. Every Axios request is firing twice in my react redux node app. I am using node`s express framework. If I take login page example then Action is dispatching from login page like:

import React, { useState } from "react";
import { connect } from "react-redux";
import { Link, Redirect } from "react-router-dom";
import { login } from "../../actions/auth";
import PropTypes from "prop-types";

const Login = ({ login, isAuthenticated }) => {
  const [formData, setFormData] = useState({
    email: "",
    password: ""
  });

  const { email, password } = formData;
  const onChange = e =>
    setFormData({ ...formData, [e.target.name]: e.target.value });

  const onSubmit = async e => {
    e.preventDefault();
    login({ email, password }); // this is action
  };
  //redirect if login
  if (isAuthenticated) {
    return <Redirect to="/dashboard" />;
  }
  return (
    <section className="container">
      <h1 className="large text-primary">Sign In</h1>
      <p className="lead">
        <i class="fa fa-user" aria-hidden="true"></i>Sign in your Account
      </p>
      <form className="form" onSubmit={e => onSubmit(e)}>
        <div className="form-group">
          <input
            type="email"
            placeholder="Email Address"
            name="email"
            value={email}
            onChange={e => onChange(e)}
            required
          />
        </div>
        <div className="form-group">
          <input
            type="password"
            placeholder="Password"
            name="password"
            minLength="6"
            value={password}
            onChange={e => onChange(e)}
            required
          />
        </div>
        <input type="submit" className="btn btn-primary" value="Login" />
      </form>
      <p className="my-1">
        don't have an account? <Link to="/register">Sign Up</Link>
      </p>
    </section>
  );
};

Login.propTypes = {
  login: PropTypes.func.isRequired,
  isAuthenticated: PropTypes.bool
};

const mapStateToProps = state => ({
  isAuthenticated: state.auth.isAuthenticated
});

export default connect(mapStateToProps, { login })(Login);

And user action is like

export const login = ({ email, password }) => async dispatch => {
  const config = {
    headers: {
      "Content-Type": "application/json"
    }
  };
  const body = JSON.stringify({ email, password });
  var res = "";
  try {
    //console.log('LOgin called'+ new Date());
    res = await axios.post(baseURL + "/api/users/login", body, config);
    //  console.log(res.data.token);

    //dispatch(setAlert('user login','primary'));
    const { token } = res.data.token;
    // Set token to ls
    localStorage.setItem("token", token);
    dispatch({
      type: LOGIN_SUCCESS,
      payload: res.data
    });

    dispatch(loadUser());
  } catch (err) {
    const errors = err.response.data.errors;

    if (errors) {
      errors.forEach(error => dispatch(setAlert(error.msg, "danger")));
    }

    dispatch({
      type: LOGIN_FAIL,
      payload: res.data
    });
  }
};

When I click login then I get logged in but request went twice at api/users/login but why ? I could not find the reason, it's going with all axios request in my app. Request screen is here

Maybe you're seeing the extra OPTION request in case of cross-origin. — Christiaan Westerbeek, Jan 17 '20 at 13:07

score 3 · Accepted Answer · answered Jan 17 '20 at 13:20

You're seeing an extra OPTION request for every request made by Axios. That extra OPTION request is performed by your browser because it detects cross-origin. Here's why and how the extra OPTION request is performed: Why is an OPTIONS request sent and can I disable it?

Every axios request firing twice in react-redux app?

1 Answers1