Question

所以我尝试将Stripe集成到React中，这需要设置一个节点js express服务器。服务器设置良好，并通过我对package.json和我编写的新server.js文件所做的一些更改将部署到Heroku时返回react的build文件夹。

// 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进行手动构建和{{1} }会启动服务器并根据上面的server.js文件提供构建文件。但是在部署到heroku并尝试了post操作之后，我得到了yarn run start。我已经尝试添加CORS（如上面的服务器文件中所示），但是没有用。

Answer 1

您是否尝试添加cors中间件来表达像

app.use(cors())

Answer 2

只需在server.js中首先添加以下代码

app.use(function(req, res, next) {

res.header（“ Access-Control-Allow-Origin”，“ *”）; res.header（“ Access-Control-Allow-Headers”，“来源，X-请求使用，内容类型，接受”）；下一个（）; }）;

我希望这段代码对您有所帮助，对我有帮助。

您还可以阅读这篇文章： clickme:)

设置与快递服务器的反应

2 个答案: