"我想做的事"
现在我有一个用React & Redux在typescript中构建的项目。它使用一个. Net API。我正在尝试将Stripe支付系统集成到我的项目中。
"我的问题是"
当我按照这里的文档：https://stripe.com/docs/stripe-js/react我按要求添加了所有内容并设置了我的项目。但是当我调用loadStripe()或尝试导入并添加<PaymentElement/>.im时，遇到了以下错误。
第一节第一节第一节第一节第一次

• 内容安全策略：页面的设置阻止了在inline（"script-src"）加载资源。
• 跨来源请求被阻止：同源策略不允许读取位于https://m.stripe.com/6的远程资源。（原因：CORS请求未成功）。状态代码：（无效）。

我已经附上了错误日志的图像以及我的apiResult和userInput的控制台日志，这样你就知道我返回的是什么数据了。

import React from "react";
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import { PaymentForm } from "../Components/Layout/Page/Payment";
import { useLocation } from "react-router-dom";
import { PaymentElement } from "@stripe/react-stripe-js";

export default function Payment() {
  const {
    state: { apiResult, userInput },
  } = useLocation();

  console.log(apiResult);
  console.log(userInput);

   const stripePromise = loadStripe(
     "MY-PRIVATE-STRIPE-KEY"
   );
   const options = {
     // passing the client secret obtained from the server
     clientSecret: apiResult.clientSecret,
   };

  return <Elements stripe={stripePromise} options={options}>
       <PaymentElement />
    </Elements>;
}

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using RedMangoAPI.Data;
using RedMangoAPI.Models;
using System.Net;
using Stripe;

namespace RedMangoAPI.Controllers
{
  [Route("api/[controller]")]
  [ApiController]
  public class PaymentController : ControllerBase
  {

    protected ApiResponse _response;
    private readonly IConfiguration _configuration;
    private readonly ApplicationDbContext _db;
    public PaymentController(IConfiguration configuration, ApplicationDbContext db)
    {
      configuration = configuration;
      _db = db;
      _response = new();
    }

    [HttpPost]
    public async Task<ActionResult<ApiResponse>> MakePayment(string userId)
    {
      ShoppingCart shoppingCart = _db.ShoppingCarts
        .Include(u => u.CartItems)
        .ThenInclude(u => u.MenuItem).FirstOrDefault(u => u.UserId == userId);

      if (shoppingCart == null || shoppingCart.CartItems == null || shoppingCart.CartItems.Count() == 0)
      {
        _response.StatusCode = System.Net.HttpStatusCode.BadRequest;
        _response.isSuccess = false;
        return BadRequest(_response);
      }

      #region Create Payment Intent 
      StripeConfiguration.ApiKey = "MY-SECRET-KEY";
      shoppingCart.CartTotal = shoppingCart.CartItems.Sum(u => u.Quantity * u.MenuItem.Price);

      PaymentIntentCreateOptions options = new()
      {
        Amount = (int)(shoppingCart.CartTotal * 100),
        Currency = "aud",
        PaymentMethodTypes = new List<string>
        {
          "card",
        }
      };

      PaymentIntentService service = new();
      PaymentIntent response = service.Create(options);
      shoppingCart.StripePaymentItentId = response.Id;
      shoppingCart.ClientSecret = response.ClientSecret;

      #endregion
      _response.Result = shoppingCart;
      _response.StatusCode = HttpStatusCode.OK;
      return Ok(_response);
    }
  }
}

我的付款工作与条纹通过我的API，但只是不在我的客户端。见下面的例子。

任何帮助都将不胜感激，在过去的2个小时里一直被困在这里。