預檢響應中的 Access-Control-Allow-Headers 不允許內容類型

Question

我閱讀了一些關於此的答案，但真的無法解決。 我不明白他們所說的“標題”是什么意思，我應該在哪里添加它以及如何添加？ 我太糊塗了。
這是錯誤：

Access to XMLHttpRequest at 'http://localhost:3001/api/checkout' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

我的后端代碼：

 const express = require("express"); //const Stripe = require("stripe") const cors = require("cors") const app = express() app.use(cors({ origin: "http://localhost:3000" })) app.use(express.json()) app.post("/api/checkout", async (req, res) => { console.log(req.body) res.send("received") }) app.listen(3001, () => { console.log("Server listening port", 3001) })

而我想要發送的數據，我只創建了一個支付方式，該方法給了我一個標識，在嘗試 {} 我想發送該標識和某些產品的總價值。 甚至我的后端也應該發送“收到”消息：前端：

 const handleSubmit = async(e) => { e.preventDefault() const { error, paymentMethod } = await stripe.createPaymentMethod({ type: "card", card: elements.getElement(CardElement) }) if (!error) { const { id } = paymentMethod try { const { data } = await axios.post("http://localhost:3001/api/checkout", { id, amount: getBasketTotal(basket) * 100, }) console.log(data) } catch(error) { console.log(error) } } }

我使用 express、stripe、cors、axios

Answer 1

您已在端口 3001 上托管應用程序，但已允許端口 3000 的 cors

嘗試這樣做，

app.use(cors({ origin: "http://localhost:3001" }))

要么

   app.use(cors());