Setting up react with express server - node.js

Question

So I tried integrating Stripe into React and it required setting up a node js express server.
The server is well set up and returns build folder of react when deployed to Heroku by some changes I made to my package.json and a new server.js file I wrote.
// package.json
{
...
"scripts": {
"dev": "react-scripts start",
"start": "node server.js",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"heroku-postbuild": "yarn run build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"proxy": "http://localhost:9000",
"engines": {
"node": "10.15"
}
}
// server.js
const express = require("express");
const app = express();
const path = require("path")
const cors = require("cors")
app.use(express.static(path.join(__dirname, 'build')));
app.use('/charge', express.json());
// app.use(cors())
let whitelist = ['localhost:9000', 'http://myapp.herokuapp.com', 'http://herokuapp.com']
let corsOptions = {
origin: function (origin, callback) {
if (whitelist.indexOf(origin) !== -1) {
callback(null, true)
} else {
callback(new Error('Not allowed by CORS'))
}
}
}
app.post("/charge", cors(corsOptions), async (req, res) => {
try {
let {amount, tokenId, stripe_key, company_name} = req.body; // params sent in with client
const stripe = require("stripe")(stripe_key); // initializes stripe with the stripe keys passed from client
// console.log(amount, tokenId, stripe_key);
let description = `Payment for posting for ${company_name} on MyApp.io`
let {status} = await stripe.charges.create({
amount,
currency: "usd",
description,
receipt_email: 'emeruchecole9#gmail.com',
source: tokenId
});
console.log(status);
res.json({status});
} catch (error) {
// res.status(500).end();
res.json({error}).end();
console.log(error)
}
});
app.get('*', (req,res) =>{
res.sendFile(path.join(__dirname+'/build/index.html'));
});
app.listen(process.env.PORT || 9000, () => console.log("Listening on port 9000"));
I have a Checkout.js file that handles the stripe payment. It sends the generated token to the express server.
The part of the Checkout.js file that sends the POST data to the server is:
axios({
method: 'post',
url: '/charge',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
data: {
amount: amount*100 || 2000, //this should be dynamic and coming from price of selected tier in tier selection plan
tokenId,
stripe_key,
company_name: company_name || 'Test Inc.'
}
})
The issue is this:
This totally works in dev mode (when I run yarn run dev and then node server.js to fire up the server) and also when I run yarn run build to manually build and yarn run start which fires up the server and serves the build file according to the server.js file above.
But after deploying to heroku and trying the post action, I get a 405 Not Allowed Error. I have tried adding CORS as seen in the server file above but it did not work.

Answer 1

Did you try to add the cors middleware to express
Like
app.use(cors())

Answer 2

Just Add Below code first of your server.js
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
i hope this code help you,it was helpful for me.
also you can read this article:
clickme:)