How to post in XML in Reacjs

Question

I am starting my walk in Reactjs, and I am going through a problem a few days ago, which is to login to an external api in my application, to give the user access to the rest of the application.

I tried to do this using Axios and passing the information by JSON, but it didn’t work, because the API only accepts the data being passed by POST, and as much as I search the internet, I can’t find what is missing in the structure I’m using.

Follows my code:

import api from "../../services/api";
import { login } from "../../services/auth";

class SignIn extends Component {

    state = {
        email: "",
        password: "",
        error: ""
    };

    handleSignIn = async e => {
        e.preventDefault();
        const { email, password } = this.state;
        if (!email || !password) {
        this.setState({ error: "Preencha e-mail e senha para continuar!" });
        } else {
        try {
            const response = await api.post("login", { email, password });
            login(response.data.token);
            this.props.history.push("/menu");
        } catch (err) {
            this.setState({
            error:
                "Houve um problema com o login, verifique suas credenciais. T.T"
            });
        }
        }
    };

And that’s how the data comes in:

And this is my Webpack file:

{
  "name": "frontend3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "build": "webpack --config webpack.prod.js",
    "start": "webpack-dev-server --config webpack.dev.js",
    "test": "jest ./test"
  },
  "jest": {
    "setupTestFrameworkScriptFile": "./test/enzyme.setup.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.3.4",
    "@babel/plugin-proposal-class-properties": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.5",
    "babel-polyfill": "^6.26.0",
    "clean-webpack-plugin": "^1.0.0",
    "cors": "^2.8.5",
    "css-loader": "^2.0.0",
    "enzyme": "^3.6.0",
    "enzyme-adapter-react-16": "^1.5.0",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^23.6.0",
    "node-sass": "^4.9.3",
    "react-router-dom": "^4.3.1",
    "react-test-renderer": "^16.8.4",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.8",
    "webpack-merge": "^4.1.4"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "react": "^16.8.4",
    "react-dom": "^16.8.4"
  }
}

If anyone can help me I will be super grateful, I am studying every day to get good at what I do, but I did not have JS before starting React, and this has affected me on simple issues like this.

From now on gratitude for those who have time to help.

Answer 1

Welcome to the Sopt!

Well, considering your problem, I understand that you are working with an API that expects to receive the format x-www-form-urlencoded, however your request with Axios is always sending in JSON, as it appears in your print of the correct request?

In that case there are two things that need to be done. First point, according to the print of your request Content-Type is defining that the request type is JSON, so we need to change to the type of upload you want, which in that case would be x-www-form-urlencoded.

Seen by the structure you posted, the code snippet where you should insert the Contet-Type must be in another file you didn’t post (which is imported to 'api').

As I don’t know how your code is in this file I can’t give you a concrete example, but it is necessary that you insert the following Header in Axios:

'Content-Type': 'application/json',

This OS topic can help you: Passing Headers with POST request in Axios

The second step is that you need to use Querystring to convert your parameters to the correct format. So your parameter sending line should look like this:

const response = await api.post("login", 
   Querystring.stringify({ 
      "email": email,
      "password": password
   }));

Don’t forget to import the query-string module first :)

const queryString = require('query-string');