Server Side Post request Firebase Functions React Form Actions-CodePudding

When I click the Button on frontend, I get directed to localhost/create-account-hosted but renders "Cannot POST". Postman however shows the Endpoint works just fine.

Not sure what I got wrong here.

Backend endpoint on Firebase Functions folder

app.post("/create-account-hosted", async (req, res) => {
  try {
  var account = await stripe.accounts.create({
    type: "custom",
    requested_capabilities: ["card_payments", "transfers"],
    business_type: 'company',
    
  })

  var accountLink = await stripe.accountLinks.create({
    account: account.id,
    success_url: "https://example.com",
    failure_url: "https://example.com",
    type: "custom_account_verification", 
    collect: "eventually_due",
  });
} catch (err) {
  console.log(err);
  res.status(400);
  res.send({ error: err });
  return;
}

res.send(accountLink.url)

Front End code form POST request for server side redirecting.

<div className="beASeller">
                    <form
                        type="submit"
                        action="/create-account-hosted"
                        method="POST"
                        class="stripe-connect white"
                    >
                        <button> Seller Signup</button>
                    </form>
                </div>

CodePudding user response：

Since my Postman was querying the Firebase function itself e.g. https://uscentral1.myfunction.cloudfunctions.net/create-account-hosted, I needed to do the same with my front end code.

<div className="beASeller">
         <button                        
         action="https://uscentral1.myfunction.cloudfunctions.net/create-account-hosted/"
         class="stripe-connect white"
         >
         </button>
</div>

CodePudding user response：

You could also use a HTTP client. For this case, we'll use Axios.

There are a bunch of additional options which you can take advantage when making a request using Axios, but here are the most common ones:

baseUrl - If you specify a base URL, it’ll be prepended to any relative URL you use.
headers - An object of key/value pairs to be sent as headers.
params - an object of key/value pairs that will be serialized and appended to the URL as a query string.
responseType - If you’re expecting a response in a format other than JSON, you can set this property to arrayBuffer, blob, document, text, or stream.
auth: passing an object with username and password fields will use these credentials for HTTP Basic auth on the request.

You may refer here, for setting up Axios in your project.

After installation, you can now use Axios. Please see sample code below:

import axios from 'axios';

axios.post('https://uscentral1.myfunction.cloudfunctions.net/create-account-hosted', {"body":data}, {
    headers: {
    'Content-Type': 'application/json'
    'Authorization': 'Bearer '   token
    }
  }
)

Please also check steps 2 - 4 on this thread and see if it also helps.