条纹: ERR_BLOCKED_BY_RESPONSE
我得到了错误函数redirectToCheckout不存在。但是当我尝试在脚本标签中添加条带时。它将显示此错误。此错误发生在index.html中的条形脚本标记上。但是，即使添加了这个脚本标记，redrirectToCheckoutout也不是函数错误。
误差
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);
});
}回答 3
Stack Overflow用户
发布于 2021-08-05 10:21:26
在包裹GitHub回购有一个问题描述相同的问题，我们有。但是这个问题已经在2021年6月21日结束了，我目前还没有看到解决方案被合并到一个PR中。第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现在可以并允许在其他领域的负载源中使用。如果这仍然是一个包裹错误，那么在不久的将来可能会有另一个解决方案。
Stack Overflow用户
发布于 2022-03-11 14:31:41
我就是这样解决我的问题的：
<img src="<%= image.thumbnail %>" alt="<%= image.caption %>" title="<%= image.caption %>" class="img-fluid" crossorigin>只将crossorigin添加到img标记中。
Stack Overflow用户
发布于 2021-09-23 13:42:49
@Tom Vos解决方案不是为我工作，但他们用一个新版本修复了它。使用npm i -D parcel@2.0.0-nightly.841，它应该可以工作。
https://stackoverflow.com/questions/68663632
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号