我收到错误函数 redirectToCheckout 不存在。但是当我尝试在脚本标签中添加 Stripe 时。它显示此错误。此错误发生在 index.html 中的 strip 脚本标记上。但是即使添加了这个脚本标签 redrirectToCheckoutout is not a function 错误仍然存在。
错误
GET https://js.stripe.com/v3/ net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep Cant seem to pass through this.
Index.html
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Store</title>
<script src="https://js.stripe.com/v3/"></script>
<script src="script.js" type="module" defer></script>
</head>
Server.js
require("dotenv").config();
const express = require("express");
const app = express();
const items = require("./items.json");
const cors = require("cors");
app.use(express.json());
const stripe = require("stripe")(process.env.STRIPE_PRIVATE_KEY);
app.use(
cors({
credentials: true,
origin: process.env.CLIENT_URL,
})
);
app.get("/items", (req, res) => {
res.json(
items.map((item) => {
return {
id: item.id,
name: item.name,
price: item.priceInCents / 100,
purchased: false,
};
})
);
});
app.post("/create-checkout-session", async (req, res) => {
const item = items.find((i) => i.id === parseInt(req.body.itemId));
if (item == null) {
return res.status(400).json({ message: "Invalid Item" });
}
const session = await createCheckoutSession(item);
console.log(session.id);
res.json({ id: session.id });
});
function createCheckoutSession(item) {
return stripe.checkout.sessions.create({
payment_method_types: ["card"],
line_items: [
{
price_data: {
currency: "usd",
product_data: {
name: item.name,
},
unit_amount: item.priceInCents / 100,
},
quantity: 1,
},
],
mode: "payment",
success_url: "https://example.com/success",
cancel_url: "https://example.com/cancel",
});
}
app.listen(3000)
Api.js
import axios from "axios";
const apiInstance = axios.create({
baseURL: process.env.SERVER_URL,
withCredentials: true,
});
const stripe = require("stripe")(process.env.STRIPE_PUBLIC_KEY);
// export async function downloadAll(email) {
// return apiInstance
// .post("/download-all", { email })
// .then((res) => alert(res.data.message))
// .catch((res) => alert(res.data.message));
// }
export async function getItems() {
const res = await apiInstance.get("/items");
return res.data;
}
export function purchaseItem(itemId) {
return apiInstance
.post("/create-checkout-session", {
itemId,
})
.then((res) => {
return stripe.redirectToCheckout({ sessionId: res.data.id });
})
.then(function (result) {
if (result.error) {
alert(result.error.message);
}
})
.catch(function (error) {
console.error("Error:", error);
alert(error);
});
}
最佳答案
在 parcel GitHub 存储库中，有一个问题描述了我们遇到的相同问题。然而，该问题已于 2021 年 6 月 21 日关闭，我目前没有看到该解决方案被合并到 PR 中。 Issue #6499
解决方案:
在您的项目文件夹中(在这种特定情况下，对于 WDS 项目，客户端文件夹)创建一个 .proxyrc.js 并将以下代码放入:
module.exports = function (app) {
app.use((req, res, next) => {
res.removeHeader("Cross-Origin-Resource-Policy")
res.removeHeader("Cross-Origin-Embedder-Policy")
next()
})
}
这对我有用。我的 index.html 现在能够并允许从其他域加载源。如果这仍然是一个包裹错误，在不久的将来可能会有另一个解决方案。
关于javascript - Stripe : ERR_BLOCKED_BY_RESPONSE，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68663632/