Error: Failed to load Stripe.js at HTMLScriptElement.<anonymous>

I am using @stripe/stripe-js module in my javascript to run Stripe in my frontend alongside node and express in backend. I tried using the stripe cdn src='https://js.stripe.com/v3/' in my pug template and that didn't work form me, so I used the npm module.

Now every time I send request to my endpoints from frontend, I get an error:

Refused to load the script 'https://js.stripe.com/v3' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback

Failed to load Stripe.js

at HTMLScriptElement. (bundle.js:6999:16)

but when I console the data from fetch method, I get the success result as

 {message: 'success', session: {…}}
message: "success"
session:
after_expiration: null
allow_promotion_codes: null
amount_subtotal: 70000
amount_total: 70000
automatic_tax: {enabled: false, status: null}
billing_address_collection: null
cancel_url: "http://127.0.0.1:3000/accessTours/poon-hill-hot-spring-trekking"
client_reference_id: "5c88fa8cf4afda39709c2921"
consent: null
consent_collection: null
currency: "usd"
customer: null
customer_creation: "always"
customer_details: {email: 'abc@gmail.com', phone: null, tax_exempt: 'none', tax_ids: null}
customer_email: "abc@gmail.com"
expires_at: 1643568461
id: "cs_test_a1spczl6c2aTyF1K3DZ1nNmPWugoxgPqeREy4f85pHphxHx8IFUXi88UiU"
livemode: false
locale: null
metadata: {}
mode: "payment"
object: "checkout.session"
payment_intent: "pi_3KNLxZF1gqmNMMdG1Ow9eJFc"
payment_link: null
payment_method_options: {}
payment_method_types: ['card']
payment_status: "unpaid"
phone_number_collection: {enabled: false}
recovered_from: null
setup_intent: null
shipping: null
shipping_address_collection: null
shipping_options: []
shipping_rate: null
status: "open"
submit_type: null
subscription: null
success_url: "http://127.0.0.1:3000/"
total_details: {amount_discount: 0, amount_shipping: 0, amount_tax: 0}
url: "https://checkout.stripe.com/pay/cs_test_a1spczl6c2aTyF1K3DZ1nNmPWugoxgPqeREy4f85pHphxHx8IFUXi88UiU#fidkdWxOYHwnPyd1blpxYHZxWjA0TktEMElDNGJ0aEtISGFCb3JQYGM9T0F9UHFMPXAzamkxMDB3PXJKX31IUVcyQHRkTHA9cFE8ckx1SDRnY3xkU3M8PXZuSHBIcldUSmFrVzdjZGdJd3E8NTVnSEhfYnBvUScpJ2N3amhWYHdzYHcnP3F3cGApJ2lkfGpwcVF8dWAnPyd2bGtiaWBabHFgaCcpJ2BrZGdpYFVpZGZgbWppYWB3dic%2FcXdwYHgl"
[[Prototype]]: Object
[[Prototype]]: Object

Also when I check the stripe dash board there I can see incomplete payments.

Below is my code, can anyone help me with this?

import { loadStripe } from '@stripe/stripe-js';

export const session = async (tourID) => {
  console.log('session');
  // 1. GET CLIENT CHECKOUT SESSION FROM OUR API ENDPOINT
  const url = `http://localhost:3000/api/vr1/accessBooking/client-checkout-session/${tourID}`;
  //   const url = `http://127.0.0.1:3000/api/vr1/accessBooking/client-checkout-session/${tourID}`;

  try {
    const response = await fetch(url, {
      method: 'GET',
      mode: 'same-origin',
    });

    const data = await response.json();
    console.log(data);

    // 2. CHARGE THE CARD WITHIN FORM
    const stripe = await loadStripe(
      'pk_test_51KNA5LF1gqmNMMdGjwUef8JD**MY_API_KEY**'
    );

    stripe.redirectToCheckout({
      sessionId: data.session.id,
    });
  } catch (err) {
    console.log(err);
  }
};

But somehow I can not reach to the checkout page.