在生产环境中不允许我的 POST 请求答案

【问题标题】：My POST request is NOT ALLOWED when in a production environment在生产环境中不允许我的 POST 请求
【发布时间】：2020-10-17 13:22:37
【问题描述】：

这是我第一次发帖求助，请多多包涵。

我创建了一个 react 应用，它使用 express 来通过 Stripe 创建支付意图。在我的机器上本地，该应用程序运行良好。我可以导航到获取 POST 方法并创建可以在 Stripe 仪表板上看到的付款意图的页面。但是，当我上传到 Heroku 时，每次点击页面时，我的 post 方法都会立即收到 405 Not Allowed 错误。

我注意到响应标头设置为 text/plain 并尝试使用 res.type('json') 将其更改为 JSON，但是错误仍然显示响应标头设置为 text/plain。我不太清楚这是否是问题所在。任何帮助将不胜感激。

Screenshot of Error Screenshot of Success on my local machine

Server.js 文件。

const express = require("express");
const app = express();
const { resolve } = require("path");
const path = require('path');
const cors = require('cors')
// This is your real test secret API key.
const stripe = require("stripe")(hidden);

const PORT = process.env.PORT || 4242;

app.use(express.static("."));
app.use(express.json());
app.use(cors());

app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

const calculateOrderAmount = items => {
  let result = items.map(a => a.qty * 1500);
  const reducer = (accumulator, currentValue) => accumulator + currentValue;
  return result.reduce(reducer, 500)
};

app.post("/create-payment-intent", async (req, res) => {
  const { items } = req.body;
  // Create a PaymentIntent with the order amount and currency
  const paymentIntent = await stripe.paymentIntents.create({
    amount: calculateOrderAmount(items),
    currency: "usd",
    payment_method_types: ['card'],
  });
  res.send({
    clientSecret: paymentIntent.client_secret
  });
});

在我的 React 函数中调用 POST 请求的函数

useEffect(() => {
    // Create PaymentIntent as soon as the page loads
    window
      .fetch("/create-payment-intent", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({items: [{ qty: qty1 }, {qty: qty2}, {qty: qty3}] })  
      })
      .then(res => {
        return res.json();
      })
      .then(data => {
        setClientSecret(data.clientSecret);
      });
  }, [qty1, qty2, qty3]);

我还需要提供什么来帮助解决这个问题吗？

【问题讨论】：

我认为这可能是 Heroku 的问题。你究竟是如何部署到 Heroku 的？你在使用 heroku/static buildpack 吗？
我相信我是。这是我最新的构建日志的一部分。 -----> Build succeeded! =====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git =====> Detected Framework: React.js (create-react-app) Writing static.json` 支持 create-react-app 启用运行时环境变量 =====> 下载 Buildpack：github.com/heroku/heroku-buildpack-static.git =====> 检测到的框架：静态 HTML `
我正在上传到github并使用heroku的自动部署。我认为这回答了你的问题。
我认为这条评论描述了你的问题：stackoverflow.com/questions/50970961/…你能联系 Heroku 支持并确认情况仍然如此吗？
嗯，好的。我已经联系 Heroku 支持，看看这是否仍然是问题。感谢您帮助贾斯汀。我会让你知道结果如何。

标签： reactjs express stripe-payments http-status-code-405

【解决方案1】：

这里的问题是 Heroku 上的静态构建包只允许 GET 请求，而不是 POST 请求。切换到标准节点包即可解决问题。

【讨论】：

【解决方案2】：

所以，在花了太多时间在这之后，我已经解决了我的问题。
我尝试了贾斯汀的方式，但无法解决。
这就是我所做的。
我使用了 mars/create-react-app
登录并创建应用后在控制台运行
heroku buildpacks:set mars/create-react-app -a blogsterapp

https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack
在上面的帖子中，proxy for deployment 部分按照上面的说明进行操作 - 创建 static.json。这将使任何在其请求中包含 /api 的请求都将被定向到后端。
在heroku中添加配置变量，你就完成了。

【讨论】：