Socket IO issue in custom React app and frappe as backend

Frappe Framework
1

I have followed this video to setup event.

I am able to get the data in real time in console using frappe.realtime.on.

I have created an after_insert hooks to publish it in console log and it works.

Now I am trying to show the data in my custom react app. I have enabled CORS as I can get other data from the frappe site easily via api calls but with socket-io, I am getting CORS issue.

“Access to XMLHttpRequest at ‘https://my_frappe_site/socket.io/?EIO=4&transport=polling&t=Oh-lMwM’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header has a value ‘https://my_frappe_site’ that is not equal to the supplied origin.”

what other steps we need to take server side or client side?

2

Hello @mohitchechani ,

Have you got this issue fixed?

3

Since you have request/response header mismatch, you can use below proxy setup for socketio to work.

import { defineConfig, loadEnv } from "vite";

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, "../../", "");
  let proxyConfig = {};

  if (env.VITE_SITE_NAME && env.VITE_SITE_PORT) {
    proxyConfig = {
      "^/(app|api|assets|files|private|socket.io)": {
        target: `http://${env.VITE_SITE_NAME}:${env.VITE_SITE_PORT}`,
        ws: true,
        changeOrigin: true,
        secure: false,
      },
    };
  }

  return {
    server: {
      port: 5173,
      proxy: proxyConfig,
    },
    // rest of the configuration
    
  };
});
4

where to add it?