React Appilcation using https-proxy-middleware is unable to send tracking data to server

General questions
1

I have a react application running on https ://127.0.0.1:5000 that uses a http-proxy-middleware and my matomo application running on http://localhost:8080.

Currently, the tracking script is unable to send data to matomo application and i am wondering if there is any configuration that i am missing out.

I have followed https://matomo.org/faq/new-to-piwik/how-do-i-start-tracking-data-with-matomo-on-websites-that-use-react/ to setup.

I am able to fetch the tracking script from http ://localhost:8080/js/container_gTvaVjug.js

NetworkTab
NetworkTab1192×618 193 KB

The tracking script is unable to send tracking data to the endpoint http ://localhost:8080 as it sends the data to endpoint https ://127.0.0.1:500 instead
Shown by text box [Error 504…]

However if i use fetch method shown below [postData()], i am able to reach it.
Shown by text box [Success POST…]

I can’t seem to get the proxy server or the script to send the data to the correct end point. Any help would be greatly appreciated.

Here is a snippet of my App.tsx

const App = (): JSX.Element => {
  
  //This is able to fetch the script in http ://localhost:8080/js/container_gTvaVjug.js
  useEffect(() => {
    var _mtm = window._mtm = window._mtm || [];
    _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
    _mtm.push({'event': 'mtm.PageView'});
    _mtm.push({setTrackerUrl: 'http://localhost:8080'});
    var d=document, g=d.createElement('script'), s:any=d.getElementsByTagName('script')[0];
    g.async=true; g.src='http ://localhost:8080/js/container_gTvaVjug.js'; s.parentNode.insertBefore(g,s);
   }, [])
  
  //This is able to send data to Matomo application
  useEffect(() => {
    const postData = async () => {
      try {
        const response = await fetch('http://localhost:8080/matomo.php?action_name=&idsite=2&rec=1&r=088249&h=9&m=18&s=39&url=https%3A%2F%2F127.0.0.1%3A5000%2Fdashboard&_id=aacc06a032453c54&_idn=0&send_image=0&_refts=0&pv_id=2J2TxM&pf_net=28&pf_srv=9&pf_tfr=1&pf_dm1=1298&uadata=%7B%22fullVersionList%22%3A%5B%7B%22brand%22%3A%22Chromium%22%2C%22version%22%3A%22124.0.6367.63%22%7D%2C%7B%22brand%22%3A%22Google%20Chrome%22%2C%22version%22%3A%22124.0.6367.63%22%7D%2C%7B%22brand%22%3A%22Not-A.Brand%22%2C%22version%22%3A%2299.0.0.0%22%7D%5D%2C%22mobile%22%3Atrue%2C%22model%22%3A%22Nexus%205%22%2C%22platform%22%3A%22Android%22%2C%22platformVersion%22%3A%226.0%22%7D&cookie=1&res=499x742', 
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          }
        });
      } catch (error) {
        console.error(error);
      }
    };
    postData();
  }, []);

  return (
    <div>
       Hello World
    </div>
  );
};

and my http-proxy-middleware

const createProxyMiddleware = require('http-proxy-middleware');
module.exports = function (app) {
  app.use(createProxyMiddleware('/matomo.php', {
    target: 'http ://localhost:8080/matomo.php',
    secure: false,
    changeOrigin: true,
    headers: {
        Connection: 'Keep-Alive'
    },
    logLevel: 'debug'
  }))
};