Настройка реакции с экспресс-сервером - PullRequest
Новая
       21

Настройка реакции с экспресс-сервером

2 голосов
/ 06 июня 2019

Поэтому я попытался интегрировать Stripe в React, и мне потребовалось настроить узел js express server. Сервер хорошо настроен и возвращает папку build of response при развертывании в Heroku с некоторыми изменениями, внесенными мной в package.json и в новый файл server.js, который я написал. 

// 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"));

У меня есть файл Checkout.js, который обрабатывает полосовой платеж. Он отправляет сгенерированный токен на экспресс-сервер. Часть файла Checkout.js, которая отправляет данные POST на сервер: 

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.'
                  }
            })

Проблема заключается в следующем: Это полностью работает в режиме dev (когда я запускаю yarn run dev, а затем node server.js для запуска сервера), а также когда я запускаю yarn run build для ручной сборки и yarn run start, который запускает сервер и обслуживает сборку файл в соответствии с файлом server.js выше. Но после развертывания на героку и попытки пост-действия я получаю 405 Not Allowed Error. Я попытался добавить CORS, как видно из файла сервера выше, но он не работал.

Ответы [ 2 ]

0 голосов
/ 06 июня 2019

Просто добавьте код ниже вашего вашего 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»);следующий();});

я надеюсь, что этот код поможет вам, он был полезен для меня.

также вы можете прочитать эту статью: clickme:)

0 голосов
/ 06 июня 2019

Вы пытались добавить промежуточное программное обеспечение Cors для выражения Like 

app.use(cors())
...