条纹：ERR_BLOCKED_BY_RESPONSE

Question

我收到错误函数 redirectToCheckout 不存在。但是当我尝试在脚本标签中添加条纹时。它显示此错误。此错误发生在 index.html 中的条带脚本标记上。但是即使添加了这个脚本标签 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);
    });
}

Answer 1

包裹 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 现在可以并允许从其他域加载源。如果这仍然是一个包裹错误，在不久的将来可能会有另一个解决方案。

Answer 2

对我不起作用，但他们在新版本中修复了它。使用 npm i -D parcel@2.0.0-nightly.841 它应该可以工作。

Answer 3

这就是我解决问题的方法：

<img src="<%= image.thumbnail %>" alt="<%= image.caption %>" title="<%= image.caption %>" class="img-fluid" crossorigin>

仅将 crossorigin 添加到 img 标签。

条纹：ERR_BLOCKED_BY_RESPONSE

Stripe: ERR_BLOCKED_BY_RESPONSE

javascript

node.js

stripe-payments

cross-origin-embedder-policy