Proxy error: Could not proxy request /payment from localhost:3000 to https://localhost:5000/

Question

I am trying to create a stripe payment app using reactJS and expressJS, I am getting this error:

Proxy error: Could not proxy request /payment from localhost:3000 to https://localhost:5000/
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (EPROTO)

In package.json file I have set proxy as -

"proxy": "https://localhost:5000"

In my react component I have -

const onToken = token => {
    axios({
      url: "payment",
      method: "post",
      data: {
        amount: priceForStripe,
        token: token
      }
    })
      .then(response => {
        alert("succesful payment");
      })
      .catch(error => {
        console.log("Payment Error: ", error);
        alert(
          "There was an issue with your payment! Please make sure you use the provided credit card."
        );
      });
  };

In my server.js I have -

const stripe = require("stripe")("sk_test_...");
app.post("/payment", (req, res) => {
  const body = {
    source: req.body.token.id,
    amount: req.body.amount,
    currency: "usd"
  };

  stripe.charges.create(body, (stripeErr, stripeRes) => {
    if (stripeErr) {
      res.status(500).send({ error: stripeErr });
    } else {
      res.status(200).send({ success: stripeRes });
    }
  });
});

whenever I submit any payment I hit error -

I tried all method linked here but can't solve that issue. I heartily thank if anyone explain any solution of that problem.

Are you sure that the service listening on `localhost:5000` is using HTTPS? Maybe you need `http://localhost:5000` instead of `https://localhost:5000`? — CherryDT, Mar 08 '20 at 21:46
Try to test the backend without using the frontend with something like postman — Greg M, Mar 08 '20 at 21:48
I set proxy `"proxy": "http://localhost:5000"` and set `app.post("/payment", (req, res) => { res.send("Working nice");})` And use Postman to post `http://localhost:5000/payment` then I get `Working nice` but when I add stripe things then still got the same problem. @GregM seems confusing. then where is exactly the error hit. — Error 500, Mar 08 '20 at 22:08
@NajmunNahar That indicates the error is with stripe and probably with the information you are sending it. I think you might be missing a customer.id from the body. This post https://arjunphp.com/node-stripe-express-js/ shows the body for a charges.create request as `{ // charge the customer amount, description: "Sample Charge", currency: "usd", customer: customer.id }` — Greg M, Mar 09 '20 at 03:45
Thanks @GregM. Finally solved it. If your turn your comment as a answer I will accept it. Thanks again. — Error 500, Mar 09 '20 at 06:18

score 1 · Answer 1 · answered Mar 09 '20 at 06:23

As @CherryDT mentioned, first I set proxy to "proxy": "http://localhost:5000". Then I change my backend code as @Greg M suggested -

app.post("/payment", (req, res) => {
  stripe.customers
    .create({
      email: req.body.email, // customer email, which user need to enter while making payment
      source: req.body.token.id // token for the given card
    })
    .then(customer =>
      stripe.charges.create({
        // charge the customer
        amount: req.body.amount,
        description: "Sample Charge",
        currency: "usd",
        customer: customer.id
      })
    )
    .then(charge => res.status(200).send({ success: "success" }));
});

That's it. My payment method works perfectly.

score 0 · Answer 2 · answered Mar 08 '20 at 22:40

I think the proxy error is a red herring. The real issue is the parsing on your server, causing the 500.

It looks like by default Axios encodes the json for you (but you should double check the request). To access JSON encoded request body data in Express, you need to use the body-parser middleware.

See this answer for an example: How do I consume the JSON POST data in an Express application

score 0 · Accepted Answer · answered Mar 09 '20 at 17:57

Since your backend works fine without stripe, the 500 error indicates that stripe is the problem.

This is related to the information you are sending in the body of the stripe charges.create request. I think you are missing the customer.id.

This post arjunphp.com/node-stripe-express-js shows the charges.create request as

{ amount, 
  description: "Sample Charge", 
    currency: "usd", 
    customer: customer.id 
}

score 0 · Answer 4 · answered Jul 28 '20 at 06:05

0

I'm taking the exact react course from Andre. My solution was to start the backend server.

So whoever gets into this issue from the same course either try the answer above or:

npm start

or

yarn start

answered Jul 28 '20 at 06:05

devpato

3,994
6
29
67

Proxy error: Could not proxy request /payment from localhost:3000 to https://localhost:5000/

4 Answers4