React frontend engine giving Blocked script execution in <URL> and CORS issue

nafeeur10 · ‎03-19-2025

I am using https://github.com/Kyon147/laravel-shopify this package to develop the Shopify app using the Laravel 11 version. Frontend engine REACT.

App Bridge is the latest.

This is my app.blade.php file:

<head>
    <meta name="shopify-api-key" content="xxx" />
    <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>

    @viteReactRefresh
    @vite('resources/js/index.tsx')
</head>
<body>
    <div id="app"><!--index.jsx injects App.jsx here--></div>
</body>

And this is the `index.tsx` file:

import React from 'react';
import App            from './App'
import '@shopify/polaris/build/esm/styles.css';
import ReactDOM from 'react-dom/client';

const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<App />);

But giving the below error. Blade is getting perfectly but not index.tsx file.

Click to expand...

Blocked script execution in '<URL>' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

Click to expand...

Access to script at 'http://127.0.0.1:5173/@vite/client' from origin 'https://3385-103-95-97-72.ngrok-free.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Please let me know if it works by giving it a like or marking it as a solution!
Working as Technical Lead at Akij iBOS
If you need any help, mail me at inafeeur [at] gmail.com or Give me a text message on Skype nafeeur.rahman1

fgh4 · ‎03-21-2025

Try setting your APP_URL to the ngrok url and then set the url for vite.

VITE_APP_URL=${APP_URL}

I've also found using Cloudflare tunnels much better then ngrok. Here is a tutorial on how to set it up if you are using valet - https://gist.github.com/irazasyed/46295bc3b823bb3b13c9acd51b96b4ad

React frontend engine giving Blocked script execution in <URL> and CORS issue

React frontend engine giving Blocked script execution in <URL> and CORS issue

Community Blog Articles