使用flutter客户端向node.js express api发出post请求

Question

This is my first question, so I apologize in advanced for any noob mistakes on this platform.

I am creating an API with Firebase Cloud Functions using Express.js. I am trying to get Flutter to communicate with this API in order to signup a user. When I test my API in Postman, everything works. I send my request with raw JSON data, and the response gives me a JSON object of some of the account information that I will want to be displayed on the client.

I am using VSCode for all of this and debugging the Flutter code with the Web debugger.

I have looked around on here and have tried two solutions which bear their own errors. The first approach:

var response = await http.post(uri, body: {
  'email': 'bob@email.com',
  'username': 'BoB',
  'password': 'password',
  'passwordConfirm': 'password',
});

I get Error: XMLHttpRequest error. doing this. I received Error: Bad state: Cannot set the body fields of a Request with content-type "application/json". when I tried to set the headers in with this approach like this in the http.post function:

headers: <String, String>{'content-type': 'application/json',},

After some reading on this site, I came across the second approach:

HttpClient httpClient = new HttpClient();
var jsonMap = {
  'email': 'bob@email.com',
  'username': 'BoB',
  'password': 'password',
  'passwordConfirm': 'password',
};
HttpClientRequest request = await httpClient.postUrl(uri);
request.headers.add('content-type', 'application/json');
request.add(utf8.encode(json.encode(jsonMap)));
HttpClientResponse response = await request.close();
httpClient.close();

The hope being that the first method just deleted some necessary headers, however, this method produced Error: Unsupported operation: Platform._version So I tried updating Flutter, but received the same error.

The API code looks like this:

const functions = require("firebase-functions");
const signup = require("./handlers/signup");
const app = require("express")();
const cors = require("cors");
app.use(cors());

app.post("/signup", signup);

exports.api = functions.https.onRequest(app);

The first thing the signup handler does is log the request to console, and nothing I've tried has gotten that far.

I am using localhost to serve the firebase functions and to run the flutter client.

I have also tried sending plain/text in the http.post request and having the handler parse it into an object to use with the code I already have, however, the request doesn't make it to the handler. I didn't save the code or the error(s) I received doing it that way. I failed to get this approach to work even with Postman.

Thank you for your help. If you need more information, please let me know.

Answer 1

Setting the content type to x-www-form-urlencoded as shown worked worked:

var response = await http.post(
  Uri.parse(
      'http://localhost:5000/fadenworlddev/us-central1/api/signup'),
  headers: <String, String>{
    'Content-Type':
        'application/x-www-form-urlencoded; charset=UTF-8',
  },
  body: <String, String>{
    'username': 'BoB',
    'email': 'Bob@email.com',
    'password': 'password',
    'passwordConfirm': 'password',
  },
);